<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.6.0/jszip-2.5.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.4/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.7/sb-1.3.4/sp-2.0.2/sl-1.4.0/sr-1.1.1/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.6.0/jszip-2.5.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.4/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.7/sb-1.3.4/sp-2.0.2/sl-1.4.0/sr-1.1.1/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.12.1/sorting/datetime-moment.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.12.1/filtering/type-based/diacritics-neutralise.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.12.1/filtering/type-based/accent-neutralise.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>João Paulo </td>
<td>Médico</td>
<td>Brasília</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$4,080</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>2010/10/14</td>
<td>$6,730</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$5,000</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$5,000</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$5,300</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$4,800</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$2,875</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$3,750</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Javascript Developer</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$5,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$3,120</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$3,120</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Financial Controller</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>System Architect</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$3,600</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Technical Author</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$4,965</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>2010/09/20</td>
<td>$4,965</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>2009/10/09</td>
<td>$2,875</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$4,525</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>2010/11/14</td>
<td>$4,080</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>18</td>
<td>2011/06/07</td>
<td>$3,750</td>
</tr>
<tr>
<td>Ebony Grimes</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$2,875</td>
</tr>
<tr>
<td>Russell Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/08/14</td>
<td>$3,600</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>2011/06/02</td>
<td>$3,750</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$2,875</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$6,730</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$6,730</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$4,080</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Senior Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$3,750</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$4,080</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$4,200</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>System Architect</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$4,965</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$5,000</td>
</tr>
<tr>
<td>Miriam Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/02/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Odessa Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>2009/08/19</td>
<td>$3,600</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$3,600</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$4,800</td>
</tr>
<tr>
<td>Elton Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>2012/04/09</td>
<td>$6,730</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$4,800</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$5,300</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$2,875</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$4,800</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$4,080</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$3,120</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$5,300</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$5,300</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>2011/06/27</td>
<td>$4,080</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
$(document).ready(function() {
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
'locale-compare-asc': function ( a, b ) {
return a.localeCompare(b, 'cs', { sensitivity: 'accent' })
},
'locale-compare-desc': function ( a, b ) {
return b.localeCompare(a, 'cs', { sensitivity: 'accent' })
}
})
jQuery.fn.dataTable.ext.type.search.string = function (data) {
return !data
? ''
: typeof data === 'string'
? data
.replace(/\n/g, ' ')
.replace(/[éÉěĚèêëÈÊË]/g, 'e')
.replace(/[šŠ]/g, 's')
.replace(/[čČçÇ]/g, 'c')
.replace(/[řŘ]/g, 'r')
.replace(/[žŽ]/g, 'z')
.replace(/[ýÝ]/g, 'y')
.replace(/[áÁâàÂÀãÃ]/g, 'a')
.replace(/[íÍîïÎÏ]/g, 'i')
.replace(/[ťŤ]/g, 't')
.replace(/[ďĎ]/g, 'd')
.replace(/[ňŇ]/g, 'n')
.replace(/[óÓ]/g, 'o')
.replace(/[úÚůŮ]/g, 'u')
: data
}
$.fn.dataTable.moment('DD/MM/YYYY');
$.extend( true, $.fn.dataTable.DateTime, {
defaults:{
i18n: {
unknown: '?', hours: 'Hora', seconds : 'Segundos',
previous: 'Anterior', next: 'Próximo',
months: [ 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ],
weekdays: [ 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab' ], unknown: '?',
},
locale: 'pt-BR',
invalidDate: 'Date não é valida',
displayFormat: 'ddd DD MMM YYYY HH:mm',
wireFormat: 'ddd DD MMM YYYY HH:mm',
yearRange: 80}
});
var table = $('#example').DataTable( {
"language": {
"emptyTable": "Nenhum registro encontrado",
"info": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"infoEmpty": "Mostrando 0 até 0 de 0 registros",
"infoFiltered": "(Filtrados de _MAX_ registros)",
"infoThousands": ".",
"loadingRecords": "Carregando...",
"processing": "Processando...",
"zeroRecords": "Nenhum registro encontrado",
"search": "Pesquisar",
"paginate": {
"next": "Próximo",
"previous": "Anterior",
"first": "Primeiro",
"last": "Último"
},
"aria": {
"sortAscending": ": Ordenar colunas de forma ascendente",
"sortDescending": ": Ordenar colunas de forma descendente"
},
"select": {
"rows": {
"_": "Selecionado %d linhas",
"1": "Selecionado 1 linha",
},
"cells": {
"1": "",
"_": "",
},
"columns": {
"1": "",
"_": "",
}
},
"searchPanes": {
"clearMessage": "Limpar Tudo",
"collapse": {
"0": "Painéis de Pesquisa",
"_": "Painéis de Pesquisa (%d)"
},
"count": "{total}",
"countFiltered": "{shown} ({total})",
"emptyPanes": "Nenhum Painel de Pesquisa",
"loadMessage": "Carregando Painéis de Pesquisa...",
"title": "Filtros Ativos",
"showMessage": "Mostrar todos",
"collapseMessage": "Fechar todos"
},
"searchBuilder": {
"valueJoiner": 'e',
"add": "Adicionar Condição",
"button": {
"0": "Pesquisa Avançada",
"_": "Pesquisa Avançada (%d)"
},
"clearAll": "Limpar Tudo",
"condition": "Condição",
"conditions": {
"date": {
"after": "Depois",
"before": "Antes",
"between": "Entre",
"empty": "Vazio",
"equals": "Igual",
"not": "Não",
"notBetween": "Não Entre",
"notEmpty": "Não Vazio"
},
"number": {
"between": "Entre",
"empty": "Vazio",
"equals": "Igual",
"gt": "Maior Que",
"gte": "Maior ou Igual a",
"lt": "Menor Que",
"lte": "Menor ou Igual a",
"not": "Não",
"notBetween": "Não Entre",
"notEmpty": "Não Vazio"
},
"string": {
"contains": "Contém",
"empty": "Vazio",
"endsWith": "Termina Com",
"equals": "Igual",
"not": "Não",
"notEmpty": "Não Vazio",
"startsWith": "Começa Com",
"notContains": "Não contém",
"notStartsWith": "Não começa com",
"notEndsWith": "Não termina com"
},
"array": {
"contains": "Contém",
"empty": "Vazio",
"equals": "Igual à",
"not": "Não",
"notEmpty": "Não vazio",
"without": "Não possui"
}
},
"data": "Dados",
"deleteTitle": "Excluir regra de filtragem",
"logicAnd": "E",
"logicOr": "Ou",
"title": {
"0": "Pesquisa Avançada",
"_": "Pesquisa Avançada (%d)"
},
"value": "Valor",
"leftTitle": "Critérios Externos",
"rightTitle": "Critérios Internos"
},
},
columnDefs : [
{ targets: "all", type: 'locale-compare' },
],
scrollX: true,
fixedHeader: true,
order: [[5, 'desc']],
pageLength: 10,
searchPanes: {
columns: [0,1,2],
},
colReorder: true,
rowReorder: true,
select: {
style: 'multi'
},
buttons: {
dom: {
button: {
className: 'btn-lg btn-light btn '
}
},
buttons:
[
{
//COPY
extend: 'colvis',
exportOptions: {
columns: ':visible'
},
text: 'Colunas',
title: 'RIB-Procedimentos Dr. {{user}}',
},
{
extend: 'searchBuilder',
text: 'Pesquisa Avançada',
config: {
depthLimit: 2
}
},
{
//EXCEL
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
},
text: '<i class="fas fa-file-excel fa-xl"></i>',
title: 'RIB-Procedimentos Dr. {{user}}',
},
{
//PRINT
extend: 'print',
exportOptions: {
columns: ':visible'
},
text: '<i class="fas fa-print fa-xl"></i>',
title: 'RIB-Procedimentos Dr. {{user}}',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '10pt' )
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
var last = null;
var current = null;
var bod = [];
var css = '@page { size: landscape; }',
head = win.document.head || win.document.getElementsByTagName('head')[0],
style = win.document.createElement('style');
style.type = 'text/css';
style.media = 'print';
if (style.styleSheet)
{
style.styleSheet.cssText = css;
}
else
{
style.appendChild(win.document.createTextNode(css));
}
head.appendChild(style);
}
},
{
//COPY
extend: 'copy',
exportOptions: {
columns: ':visible'
},
text: '<i class="fas fa-copy fa-xl"></i>',
title: 'RIB-Procedimentos Dr. {{user}}',
},
]
},
dom: "<'#botoes'<'bg-light rounded'B>><'mx-auto mt-3'f>rtip<'#filtro'P>",
});
$(':input').keyup(function () {
table
.search(
jQuery.fn.dataTable.ext.type.search.string(this.value)
)
.draw()
});
$('#filtro span').css('overflow', 'visible').css('margin-top', '4px').css('margin-bottom', '4px');
});
You can jump to the latest bin by adding /latest
to your URL
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + [ | Indents selected lines |
ctrl + ] | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Clone Bin |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |