Search code examples
javascriptdatatablescrollloaddynamically-generated

How to Load data dynamically onscroll with Datable Jquery?

I'm trying to load data dynamically on scroll with DATATABLE plugin with jquery without pagination. I've a more than 3000 rows in my database and it take a long time to load so i want to load 200 rowsof these data when the user scroll the table at the end.

Here is my javascript code

 <script src="{{asset('backend/js/demo/datatables-demo.js')}}"></script>
  <script>
      
      $('#user-dataTable').DataTable( {
        
          "bInfo": false, //Dont display info e.g. "Showing 1 to 4 of 4 entries"
          "paging": false,//Dont want paging                
          "bPaginate": false,//Dont want paging
            
        } );

  </script>

Think You !

Solution

  • You need to get new record on scroll event

    $(function() {

  var $mytable = $("#myTable");
  var page = 10;
  var count = 10; //initial number of rows 
  var max = 500; //max number of rows (just for demo)
  var $datatable = $mytable.DataTable({
    "paging": false,
    "bFilter": false
  }); //init the datatable and return a refence to it



  //listen for scroll and resize and custom 'fetchmore' events
  $(window).bind('scroll resize fetchmore', function() {
    var viewportHeight = window.innerHeight;
    var scrolltop = $(window).scrollTop();
    var bottomOfTable = $mytable.offset().top + $mytable.outerHeight();

    //console.log(viewportHeight, scrolltop, bottomOfTable);

    if ($(window).scrollTop() + viewportHeight >= bottomOfTable) {
      if (count < max) {
        //console.log("Fetch more data!");
        load_more();
        $(window).trigger("fetchmore"); //keep triggering this event until we've filled the viewport
      }
    }



  });

  function load_more() {
    //fetch more data here
    
    for(var i = 0;i<= page;i++){
        count++;
        $datatable.row.add([
        count + '.1',
        count + '.2 (new loaded)'
      ]).draw(false);
    }
  }

  //trigger initial fetch
  $(window).trigger("fetchmore");
});
    <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>

<body>
  <table id="myTable" class="display">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.1</td>
        <td>1.2 (initial row)</td>
      </tr>
      <tr>
        <td>2.1</td>
        <td>2.2 (initial row)</td>
      </tr>
      <tr>
        <td>3.1</td>
        <td>3.2 (initial row)</td>
      </tr>
    </tbody>
  </table>
</body>