Search

Hi!, I have a problem with sorting. It only sorts like all data is string. Could you help me? Is there any solution with this case?

I have a column with a comma-delimited list of tags. I want to add a multi-select which filters this column and checks if all the selected options are found in the column. How can I do this with DataTables?

Hello, First I would like to give a big thanks to developers behind this marvelous idea that ease my life. I'm using a datatable at http://tv.dutto.fr with individual column searching (select inputs) created at table init. At the top, visitor can reload the table with other ajax sources. However, I didn't find where (to avoid "function undefined") and how (to avoid "this.api undefined") write the callback function for this 4 buttons. Here the init callback : $(document).ready(function() { function MyCallBack () { var api = this.api(); api.columns().indexes().flatten().each( function ( i ) { var column = api.column( i ); var select = $('<select class="select" id="sel'+i+'"><option value=""></option></select>') .appendTo( $(column.footer()).empty() ) .on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search( val ? '^'+val+'$' : '', true, false ) .draw(); } ); column.data().unique().sort().each( function ( d, j ) { select.append( '<option value="'+d+'">'+d+'</option>' ) } ); } ); } var grille = $('#grille').DataTable( { processing: true, ajax: { url: 'ajaxtv.php', cache: 'false' }, language: { url: '/DataTables-1.10.5/French.json' }, responsive: true, order: [ 0, 'asc' ], scrollY: (screen.availHeight-200), scrollCollapse: true, stateSave: true, deferRender: true, paging: false, info: false, columns: [ { title: "Chaine", data: { _: "col1.col1c", sort: "col1.col1b", display: "col1.col1a" }}, { title: "Programme", data: { _: "col2.col2c", sort: "col2.col2b", display: "col2.col2a" }}, { title: "Suivi de", data: { _: "col3.col3c", sort: "col3.col3b", display: "col3.col3a" }}, { title: "Infos", data: { _: "col4.col4b", sort: "col4.col4b", display: "col4.col4a" }} ], initComplete: MyCallBack } ); setInterval( function () { grille.ajax.reload(); }, 60000 ); }); Here the on demand callback : <input type=radio class=switch-input name=view value=tonight id=tonight onclick="$('#grille').DataTable().ajax.url('ajax.php?page=prime').load(MyCallBack);"> <label for=tonight class="switch-label switch-label-on">Soir</label> Thanks for you help.

I followed the guide here (https://datatables.net/examples/api/multi_filter_select.html) to add select inputs to each column for easy searching/filtering of data. Everything works, but now I'd like to use selectize.js (http://brianreavis.github.io/selectize.js/) on these selects to make them match the style of every other select input on my site. The problem I'm running in to is that after these select inputs are created, I can't find them as I normally do using jQuery selectors. Is there an alternate way to find these inputs in js so I can manipulate their styling?

I managed to create drop downs on top of each column having unique values for filteration. But the problem is when i click on the drop down sorting also gets activated. I only want to sort records when user clicks on "sorting arrow icons". Is there any way to cancel sorting event while user is clicking onto the drop down ? Here is a link to DataTable Live http://live.datatables.net/ribezoho/1/edit Please let me know ATHER

I have a datatable where I show online users are hyperlinks , which can be clicked to start a chat. I want to introduce a checkbox, which when clicked will hide offline users. I have tried a lot of different things with $.fn.dataTableExt.afnFiltering.push() but in vain. My datatable object is in data_table variable, which I initiate as under data_table = $('#online_users_table').dataTable(); Please help me in hiding offline users when the checkbox is checked. Thanks!

http://www.qbhitlist.com/rankings/qbhl-premium-player-rankings/ If you go here only pro style players from 2015 are supposed to show. All players show, and then eventually (most of the time) go away. Any thoughts on this? Can post code if needed.

Hello have a problem, I try to do datable with filtergin for each column but not work just for a word of 3 letter, if I write a word large the message is: File or directory not found-- The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable. anyone know what is the problem ??? thanks

I've been stuggling with it too much time already and didn't come up with an ultimate solution yet. Doing the colspan with empty TDs (display: none) for rest of the table worked for some browsers but yield exception in IE, removing the colspan would ruin table cells design... Please assist :)

Hi all, I got a dcjs dashboard set up with Datatables and working perfectly. At the moment my footer has only one row that gives the individual sum of two of the columns. window.dataTableJUI = $("#dc-data-table").DataTable({ "dom": "<'row'<'span6'><'span6'f>r>t<'row'<'span6'il><'span6'p>>", "lengthChange": true, "info": false, "autoWidth": false, "deferRender": true, "data": alldata, "destroy": true, "footerCallback": function ( row, data, start, end, display ) { var api = this.api(), data; // Remove the formatting to get integer data for summation var intVal = function ( i ) { return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; }; // Total for "Avails" column over all pages dataAvails = api.column( 6, {search:'applied'} ).data(); totalAvails = dataAvails.length ? dataAvails.reduce( function (a, b) { return intVal(a) + intVal(b); } ) : 0; // Total for "Forecast" column over all pages dataForecast = api.column( 7, {search:'applied'} ).data(); totalForecast = dataForecast.length ? dataForecast.reduce( function (a, b) { return intVal(a) + intVal(b); } ) : 0; // Update footer $( api.column( 1 ).footer() ).html( 'Avails total: ' + totalAvails.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " // Forecast total: " + totalForecast.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") )}, "columnDefs": [ { "targets": [ 0 ], "data": "col1", "defaultContent": ""}, { "targets": [ 1 ], "data": "col2", "defaultContent": ""}, { "targets": [ 2 ], "data": "col3", "defaultContent": ""}, { "targets": [ 3 ], "data": "col4", "defaultContent": ""}, { "targets": [ 4 ], "data": "col5", "defaultContent": ""}, { "targets": [ 5 ], "data": "col6", "defaultContent": ""}, { "targets": [ 6 ], "data": "avails", "defaultContent": ""}, { "targets": [ 7 ], "data": "forecast", "defaultContent": ""} ] }); I would like to add a second footer row with column-wise search boxes, like shown here Although it is fairly easy to create the boxes with jquery, I cannot get them to be linked to rest of the table. This makes me think that I should maybe define them in the "footerCallback" but I don't have any idea where to start. Thanks a lot