Search

While useful to be be able to send all the parameters for searching and sorting listed here: https://datatables.net/manual/server-side The query string can end up quite large and in my current application I only require the draw, start, length, search[value] and order[i] parameters. So the main question is, is it possible to toggle the inclusion of columns[i] on/off to reduce the data sent to server? If not, does anybody know if the request can be intercepted to strip it from the query string? I guess another logical step to this, would be to allow the client to use the available data to build a custom query string to work with generic web API end points. By the way thanks for providing such a great tool!

Some of my cells do not have any value, and if I sort them, the numbers are sorted properly : 2 4 33 121 I need to display NULL instead of an empty sell. For that, I just check if the value of my data is empty, I assign a string NULL to it, but in this case, sorting interprets my numbers as strings and sorts them in the following order: 121 2 33 4 Is there a way to set another condition so that sort function interprets NULL as a negative number? My tables are different every time, so I will not be able to specify sorting type for a specific column, it just has to interpret NULL as a negative. Or maybe there is another solution that I didn't think of? Thank you

Hello, I'm having a problem a few days ago. I have a datatable which is displayed within a modal bootstrap. The data in this table are populated using json. My problem is that the THEAD table is getting misaligned with the rest of the table. And when I click on any title filter corrects the THEAD. If I present this table outside the modal it does not give this problem. My datatable is using the bootstrap theme. I made a video showing the error reported. For better understanding. http://www.imagero.com.br/error_dataTable_bootstrap.avi Sources with the script that is giving problem. Look at the table outside the modal functions, and the same table that is modal in error in THEAD. the download link: http://www.imagero.com.br/datatable_sources_error_modal_bootstrap.zip

Hi everyone,actually i'm designing a user permissions, i have already populated the datatables with a list of modules and have add 4 checkbox for add, read, update, delete. Unfortunately i`m unable to get the value true or false of the checkbox for specific rows... Can anyone help thanks... My html code <table class="table table-bordered table-striped table-hover table-heading table-datatable" id="datatable-2"> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td style="text-align:center;vertical-align:middle;"> <input type="checkbox" id="create" name="create"> </td> <td style="text-align:center;vertical-align:middle;"> <input id="read" type="checkbox" name="read"> </td> <td style="text-align:center;vertical-align:middle;"> <input id="update" type="checkbox" name="update"> </td> <td style="text-align:center;vertical-align:middle;"> <input id="delete" type="checkbox" name="delete"> </td> </tr> </tbody> <tfoot> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </tfoot> </table> my script <script type="text/javascript"> // Pagination and search code function AllTables(){ TestTable2(); LoadSelect2Script(MakeSelect2); } function MakeSelect2(){ $('select').select2(); $('.dataTables_filter').each(function(){ $(this).find('label input[type=text]').attr('placeholder', '<?= $search ?>'); }); } $(document).ready(function() { // Load Datatables and run plugin on tables LoadDataTablesScripts(AllTables); $('#userpermission').submit(function( event ) { event.preventDefault(); var oTable = $('#datatable-2').dataTable(); var nlines = $(oTable.fnGetNodes()).length; for(var i=0; i<nlines; i++){ var alldata = []; var column0 = oTable.fnGetNodes()[i].cells[0].childNodes[0]; var column1 = oTable.fnGetNodes()[i].cells[1].childNodes[0]; var column2 = oTable.fnGetNodes()[i].cells[2].childNodes[0]; var column3 = oTable.fnGetNodes()[i].cells[3].childNodes[0]; // here i want to retrieve every row into the array alldata.push(oTable.$(column0).text(), oTable.$(column1).text(), oTable.$(column2).text(), oTable.$(column3).$('input').val()); console.log(alldata); } }); }); function LoadDataTablesScripts(callback){ function LoadDatatables(){ $.getScript('<?= base_url() ?>public/plugins/datatables/jquery.dataTables.js', function(){ $.getScript('<?= base_url() ?>public/plugins/datatables/ZeroClipboard.js', function(){ $.getScript('<?= base_url() ?>public/plugins/datatables/TableTools.js', function(){ $.getScript('<?= base_url() ?>public/plugins/datatables/dataTables.bootstrap.js', callback); }); }); }); } if (!$.fn.dataTables){ LoadDatatables(); } else { if (callback && typeof(callback) === "function") { callback(); } } } function LoadSelect2Script(callback){ if (!$.fn.select2){ $.getScript('<?= base_url() ?>public/plugins/select2/select2.min.js', callback); } else { if (callback && typeof(callback) === "function") { callback(); } } } function TestTable2(){ var asInitVals = []; var oTable = $('#datatable-2').dataTable( { "aaSorting": [[ 0, "asc" ]], "sDom": "<'box-content'<'col-sm-6'f><'col-sm-6 text-right'l><'clearfix'>>rt<'box-content'<'col-sm-6'i><'col-sm-6 text-right'p><'clearfix'>>", "sPaginationType": "bootstrap", "oLanguage": { "sSearch": "", "sLengthMenu": '_MENU_', "sUrl": "<?= base_url() ?>public/language/<?= $language ?>.txt" }, bAutoWidth: false }); var header_inputs = $("#datatable-2 thead input"); header_inputs.on('keyup', function(){ /* Filter on the column (the index) of this element */ oTable.fnFilter( this.value, header_inputs.index(this) ); }) .on('focus', function(){ if ( this.className == "search_init" ){ this.className = ""; this.value = ""; } }) .on('blur', function (i) { if ( this.value == "" ){ this.className = "search_init"; this.value = asInitVals[header_inputs.index(this)]; } }); header_inputs.each( function (i) { asInitVals[i] = this.value; }); } </script>

I need advice on implementing custom sorting. I am developing a message inbox module (similar to Outlook). Two of the message properties are boolean isPinned & isLocked. isPinned means the user wants the msg pinned to the top of grid. isLocked means it is pinned (isLocked = isPinned = true) by the organization which should display above user-pinned messages. The tricky part is that when a user clicks on the From/Sender/Date column headers for sorting, the sort algorithm needs to ALWAYS sort isLocked to the top, followed by isPinned, followed by whatever column the user clicked on. I call the following Knockout function to initially sort the data (static data right now but eventually via Web API). I just need to figure out how to tweak column sorting to use something similar. Note: grid data is not editable, though the user can toggle pinned status (but not locked) and can click a trash icon to set isDeleted = true (it will be moved to the Trash folder). self.sortMessageHeaders = function () { self.messageHeaders.sort(function (left, right) { // original sorting algorithm--compact version of the if..blocks below //return left.isLocked() != right.isLocked() ? (left.isLocked() < right.isLocked() ? 1 : -1) : left.isPinned() != right.isPinned() ? (left.isPinned() < right.isPinned() ? 1 : -1) : left.dateSent() < right.dateSent() ? 1 : 0; // sort by locked status if they are different if (left.isLocked() != right.isLocked()) { return (left.isLocked() < right.isLocked() ? 1 : -1); } // otherwise, sort by pinned status if they are different if (left.isPinned() != right.isPinned()) { return (left.isPinned() < right.isPinned() ? 1 : -1); } // as a last resort, sort by date/time sent return (left.dateSent() < right.dateSent() ? 1 : -1); }); }; Thanks for your time and attention.

Is there an option in columnDefs to not allow the column to be reordered.

Hello, I am using datatables 1.10 and I have defined a data function in the ajax property of my datatables options as follow: "ajax": { url: AllMxEnvironments.Config.AjaxSource, data: function (d) { } } The problem is in the property d I can access all my changes in the datatable except for sorted column index and OrderDirection. Is there a way to access the ColumnOrder and OrderDirection properties of each column within this function? In case I can't can you please tell me how to get the object in the preDrawCallback or on the draw event of the table? Thanks, Jhonny.

Hi all, My question is simple enough. I have a datatable currently being populated by an Ajax call, aoColumns, and mDataProp for the fields. I want to add a column that is simply " for all rows. How do I incorporate static content into a dynamically filled table? Thanks!

Here's my java script: $(document).ready(function () { var table; $("thead input").keyup(function () { /* Filter on the column (the index) of this element */ table.fnFilter(this.value, table.oApi._fnVisibleToColumnIndex( table.fnSettings(), $("thead input").index(this))); }); $("thead input").each(function (i) { this.initVal = this.value; }); $("thead input").focus(function () { if (this.className == "search_init") { this.className = ""; this.value = ""; } }); $("thead input").blur(function (i) { if (this.value == "") { this.className = "search_init"; this.value = this.initVal; } }); table = $('#gridTable').dataTable({ "bPaginate": true, "bProcessing": true, "bServerSide": true, "bSortCellsTop": true, "sDom": 'T<"clear">Rlfrtip', "oLanguage": { "sSearch": "Pesquisar no resultado geral:" }, "contentType": "application/json; charset=utf-8", "sAjaxSource": "CustomerService.asmx/GetList", "fnServerData": function (sSource, aoData, fnCallback) { $.ajax({ "dataType": 'json', "contentType": "application/json; charset=utf-8", "type": "GET", "url": sSource, "data": aoData, "success": function (msg) { var json = jQuery.parseJSON(msg.d); fnCallback(json); $("#gridTable").show(); } }); } }); });

Im trying to have a dropdown list with checkboxes of unique data to each column using datatable and also column filter plugin. But Im getting it only to the first column . Please find the code here http://jsfiddle.net/alamelus/1wbgwhao/ Kindly help me.. Im not able to find a proper solution for this anywhere... Thanks in advance