Lazy Loading with Javascript

beginner_2018

Dear All,

I am getting the data from SharePoint list which is having almost 3000 items and displaying through java-script on page load. I would like to display initially 100 rows and then remaining . Can any one please help me how can I make it.

colin

Hi @beginner_2018 ,

You're probably best to go with server-side processing - there's a simple example here, plus others here.

Hope that gets you going,

Cheers,

Colin

beginner_2018

Sir,

I added below 2 lines in my jquery data table ,But it did't enhance performance
But I find no luck

$.fn.dataTable.pipeline = $('#tblsuperstore').DataTable({

  "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',

  initComplete: function() {
    this.api().columns().every(function() {
      var column = this;

      if (column.index() !== 4 && column.index() !== 5 && column.index() !== 6 && column.index() !== 7) {
        $(column.header()).append("<br>")
        var select = $('<select><option value=""></option></select>')
          .appendTo($(column.header()))
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });
        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>')
        });

      }

    });
  }
});

$.fn.dataTable.Api.register('clearPipeline()', function() {
  return this.iterator('tblsuperstore', function(settings) {
    settings.clearCache = true;
  });
});