Search

Haha! So obvious - when you point it out! Thank you.

is how I did filtering: [code] $("#ButtonFilter").click(function() { oTable.fnFilter( $("#input1").val(),

There are two ways to do this: Make your own text box on the page and don't allow DataTables to draw it's own (i.e. use sDom) Remove the event DataTables binds to the textbox it creates and then add your own event handler. Either way you will need to call fnFilter on each keyup event for a textbox (i.e. $('#whatever input').keyup( function () { oTable.fnFilter( this.value, 1 ); } ); You can see an example of who number 2 might be achieved with this plug-in which binds it's own event handler to the tables input box: http://datatables.net/plug-ins#api_fnSetFilteringDelay Allan

Link to test case: https://stackoverflow.com/q/73965727/679449 Debugger code (debug.datatables.net): Error messages shown: none Description of problem: I have some rows with cells containing multiple values. The counts appear correctly in the search pane, but when clicked, do not show the rows containing the multiple values. See row #1 which has two "Offices". Any suggestions?

Title', title: { 0: 'Search Filters', _: 'Search Filters (%d)' }, value:

My table columns generate by dynamically .. i want to map my json response with datatable - how can i use Ajax dataFilter: function(data){} outside my Ajax request. - i want to use this AJAX method in my code where i put this dataFilter: function(data){ var json = jQuery.parseJSON( data ); var resellerreponce = json.searchResults; json.data = resellerreponce.List; json.recordsFiltered = resellerreponce.sCount; json.recordsTotal =resellerreponce.ResultsCount; return JSON.stringify( json ); } // This is my actual code for dynamic columns $.ajax({ url: "Abc.do?action=Items", success: cb_func }); }); function getData(cb_func) { getData(function (data) { Jdata = data.searchResults.Summary; var columnNames = Object.keys(Jdata[0]); for (var i in columnNames) { columns.push({ data: columnNames[i], title: columnNames[i] }); $('#example').DataTable({ data: Jdata, columns: columns }); });

Hello, I want to make a table to be able to help me make price comparisons. Explanations: In my table I have : - Project - Product - Manufacturer - Title - Quantity - Unit buying price (sum) - Total price buying (sum) - Multiply (average) - Unit sales price (sum) - Total sales price (sum) - Profit (sum) - The ideal in my case would be to select the lines I want to keep to see the total price of my choices. So I can see the cost of different options. someone would have an idea or have already encountered this problem? The script i use : https://jsfiddle.net/#&togetherjs=xsj2oRC44B html : <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" /> <!-- /DataTables js / --> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script> <table id="example" class="display nowrap table1" cellspacing="0" width="100%"> <thead> <tr> <th>projectid</th> <th>productid</th> <th>manufacturerid</th> <th>title</th> <th>quantity</th> <th>PAU a</th> <th>PAT a</th> <th>Coef a</th> <th>PVU a</th> <th>PVT a</th> <th>Profit a</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>5</td> <td>5</td> <td>Title 1</td> <td>10</td> <td>130</td> <td>1300</td> <td>2</td> <td>260</td> <td>2600</td> <td>1300</td> </tr> <tr> <td>2</td> <td>3</td> <td>6</td> <td>Title 2</td> <td>10</td> <td>100</td> <td>1000</td> <td>2</td> <td>200</td> <td>2000</td> <td>1000</td> </tr> <tr> <td>3</td> <td>2</td> <td>5</td> <td>Title 3</td> <td>10</td> <td>50</td> <td>500</td> <td>2</td> <td>100</td> <td>1000</td> <td>500</td> </tr> </tbody> <tfoot> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th>PAU a</th> <th>PAT a</th> <th></th> <th>PVU a</th> <th>PVT a</th> <th>Profit a</th> </tr> </tfoot> </table> </div> <script> var intVal = function ( i ) { return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; }; $(document).ready(function() { var table = $('#example').DataTable( { responsive: true, scrollX: true, scrollCollapse: true, paging: true, lengthChange: false, lengthMenu: [ [10, 25, -1], [10, 25, "All"] ], "order": [[ 0, "asc" ]], "footerCallback": function ( row, data, start, end, display ) { var api = this.api(), data; var sumColumns = [5,6,8,9,10] sumColumns.forEach(function(colIndex){ // Total over all pages var total = api .column(colIndex) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Total over this page var pageTotal = api .column(colIndex, { page: 'current'} ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Update footer $( api.columns(colIndex).footer() ).html( total ); }) }, buttons: ['pdf'] }); table.buttons().container() .appendTo( '#example_wrapper .small-6.columns:eq(0)' ); }); </script> Thanks for help

Hello, I'm trying to make the multi-select box larger, on small items like age, it's not wide enough to show all the data. This is an example: http://live.datatables.net/xehexoye/1/edit I'm 99.9% sure it's in the select2.min.css, but I'm not sure exactly which setting is causing it not to be larger enough. I'm thinking padding and I've changed a bunch with no change. Can anyone point me in the direction of how to know which setting needs to be changed? Thanks for your help

I made a custom filtering option for my DataTable

size and the search filters in Java side to