DataTables - Create Custom Pagination Style (Load More Style)

Question

I would like to use a pagination style for DataTable's that is mobile friendly, I'd just like a button to load more rows when clicked which will append rows under the current visible rows.

I know this isn't available as a default option in DataTables but I believe it shouldn't be to difficult to create. Has anyone created this pagination method or seen it in use on a DataTable's table?

If not how can I modify the code of my table at https://jsfiddle.net/6k0bshb6/16/ to use this pagination style to make my table mobile friendly.

// This function is for displaying data from HTML "data-child-value" tag in the Child Row.
function format(value) {
      return '<div>Hidden Value: ' + value + '</div>';
  }

// Initialization of dataTable and settings.
  $(document).ready(function () {
      var dataTable = $('#example').DataTable({
       bLengthChange: false,
       "pageLength": 5,
       "pagingType": "simple",
       "order": [[ 7, "asc" ]],
       "columnDefs": [
            {
                "targets": [ 5 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 6 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 7 ],
                "visible": false,
                "searchable": true
            }
        ],

// Dropdown filter function for dataTable from hidden column number 5 for filtering gifts.
       initComplete: function () {
            this.api().columns(5).every(function () {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')
                    .appendTo($("#control-panel").find("div").eq(1))
                    .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>')
                });
            });
        }
    });

// This function is for handling Child Rows.
    $('#example').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = dataTable.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format(tr.data('child-value'))).show();
              tr.addClass('shown');
          }
    });

// Checkbox filter function below is for filtering hidden column 6 to show Free Handsets only.
    $('#checkbox-filter').on('change', function() {
        dataTable.draw();
    });

    $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
        var target = '£0.00';
        var position = data[6]; // use data for the position column
        if($('#checkbox-filter').is(":checked")) {
            if (target === position) {
            return true;
         }
         return false;
        }
        return true;
      }
    );
});

UPDATE: I have found some information on how to do this on the DataTables website although I don't fully understand how to integrate it into my table.

https://datatables.net/forums/discussion/3920/twitter-facebook-style-pagination

What you could possibly do (I've not tried it, but I can't think of why it wouldn't work...) is to set the scroll loading gap (the number of pixels before the bottom of the scroll for when the new data is loaded) to a negative number ( http://datatables.net/usage/options#iScrollLoadGap ) and then add a little button at the bottom of the table (might need to use fnDrawCallback for that) which when clicked will load the next data set (fnPageChange('next') should do that).

Anyone know how I can make this work with my table? Could someone show me how to do this on jsfiddle?

UPDATE 2: Response from datatables admin https://datatables.net/forums/discussion/35148/load-more-style-twitter-style-pagination-custom#latest

The iScrollLoadGap option you mention isn't available in 1.10 - infinite scrolling was removed in 1.10 and that option with it.

However the basic principle still remains - you can either have a button the user needs to press to load more rows (either increase the page size or use rows.add() to add more rows) or use a scroll detection to do the same thing.

Allan

Answer 1

Solved..

<button id="button" type="button">Page +5</button> 

//Alternative pagination
$('#button').on( 'click', function () {
    var VisibleRows = $('#example>tbody>tr:visible').length;
    var i = VisibleRows + 5;
    dataTable.page.len( i ).draw();
} );