-1

I am working on codeigniter and I have implemented jquery datatable api in my page. Everything works fine. And as you know, by default the api gives us a dropdown above the table where we can select no of records to show and we also have the search functionality. Now, what I want is, when the user gives input to the search box and the table is showing the search results. Instead of limited no of results, I want to show all records at once. How can I do that ?

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
Rabin Lama Dong
  • 2,422
  • 1
  • 27
  • 33
  • Possible duplicate of [How to show all rows by default in JQuery DataTable](http://stackoverflow.com/questions/9443773/how-to-show-all-rows-by-default-in-jquery-datatable) – devlin carnate Oct 24 '16 at 19:32

2 Answers2

1

You need to

  1. Include a -1 value in the lengthMenu so all rows is selectable
  2. When the table is being filtered, that is when search.dt is broadcasted, set lengthMenus -1 option as selected and trigger a change event
  3. Set a flag on the dataTable object to prevent the event being triggered over and over

Example :

var table = $('#example').DataTable({
  lengthMenu: [[10, -1], [10, "All"]]
})  

$('#example').on('search.dt', function(e, api) {
  if (!api._allForced) {
    $('.dataTables_length select option[value=-1]').prop('selected', true);
    $('.dataTables_length select').change();
    api._allForced = true    
  }
})

http://jsfiddle.net/stmo9w8w/

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • Okay, so with this code I am able to show all records when input is given to the search box. But when I clear the input on the search box, the dropdown value doesn't go back to it's default value ? Thank you for the response – Rabin Lama Dong Oct 25 '16 at 13:00
  • @RabinLama, "_But when I clear the input on the search box, the dropdown value doesn't go back to it's default value ?_" , yes - I only answer the question. It should be a nobrainer to reset the dropdown when the search term is empty. – davidkonrad Oct 25 '16 at 14:48
0

https://datatables.net/examples/advanced_init/length_menu.html

It is possible to easily customise the options shown in the length menu (by default at the top left of the table) using the lengthMenu initialisation option.

$(document).ready(function() {
    $('#example').DataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
} );

first result on google :

How to show all rows by default in JQuery DataTable :

Community
  • 1
  • 1
singe batteur
  • 401
  • 2
  • 14