Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  July 2020

  Like this?

  Colin
• sreecharanm Posts: 5Questions: 1Answers: 0

  July 2020 edited July 2020

  
  @colin , my question is not search for the column, i want to display show entries menu (which is a dropdown) i want that to display as text input and i if enter the number suppose 20, 20 records has to display in the page if i give 30 , 30 records should display. there should not be any pre-defined count
• colin Posts: 15,240Questions: 1Answers: 2,599

  July 2020 Answer ✓

  This should do it for you: http://live.datatables.net/dafisuro/1/edit

  Colin
• sreecharanm Posts: 5Questions: 1Answers: 0

  July 2020 edited July 2020

  @colin , yes, that will work for me . thanks for that i wrote that using keyup instead of onchange. is there any possibility that we can position the textinput in show entries position.
• sreecharanm Posts: 5Questions: 1Answers: 0

  July 2020 edited July 2020

  @colin

  <script type="text/javascript">
  
  
  
      $(document).ready(function() {
      var myTable = $('#example').DataTable( {
          responsive: true,
          "bLengthChange": false
      } );
  
      // $('#myInputTextField').keyup(function(){
      //     myTable.lengthMenu($(this).val()).draw() ;
      // })
  
      $('#pageSize1').keyup(function ()
          {
              myTable.page.len( $(this).val() ).draw();
          }
      );
  }
  
  
  );
      </script>
  

  Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• colin Posts: 15,240Questions: 1Answers: 2,599

  July 2020 edited July 2020

  Yep, you can use dom for that - there are some examples on the reference page,

  Colin
• kthorngren Posts: 21,337Questions: 26Answers: 4,954

  July 2020 Answer ✓

  Also look at this example:
  https://datatables.net/examples/advanced_init/dom_toolbar.html

  Kevin
• sreecharanm Posts: 5Questions: 1Answers: 0

  July 2020 edited July 2020

  /* Solution */
  var datatable = $('#dataset').DataTable({
  dom: '<"div.toolbar">frtip'
  });

  /* positioning the customized show entries text input field */

   $("div.toolbar").html(`<label
   style="padding-right:10px;">show</label><input
    id="pageSize1"
   style="margin-top:5px;" size="4"/><label
   style="padding-left:10px;">entries</label>`);
  

  /* keyup functionality for the show entries text input field */

          $('#pageSize1').keyup(function () {
              datatable.page.len($(this).val()).draw();
          });
  

  /* assigning the default length to the show entries text input field */

          info = datatable.page.info();
          var lengthMenuSetting = info.length;
          //        alert(lengthMenuSetting);
          document.getElementById('pageSize1').value = lengthMenuSetting;