Load More Style / Twitter Style Pagination - Custom

code-connoisseur

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 on jsfiddle?

View Question on StackOverflow: http://stackoverflow.com/questions/37302835/datatables-create-custom-pagination-style-load-more-style

allan

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

code-connoisseur

Hi Allan how would I start? I'm brand new to datatables and don't fully understand how to put theses things together - would I need to first hide rows with jQuery? or set a different pagination style? Could you show me an example of this anywhere online or add it to my table on jsfiddle so I can see it in action? https://jsfiddle.net/6k0bshb6/16/

Scott

allan

Hi Scott,

Happy to create an example under the priority support options.

Allan

code-connoisseur

Can you just explain it to me i don't have support kinda money

allan

It is explained above :-). Perhaps you could start and then link to what you've got to and I will try to offer some guidance.

The first thing to decide is if you want to add rows or change the paging length (see above).

Allan

code-connoisseur

Ok here's what I just tried but no luck...

I added this button.

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

Then added this code to the bottom of my js but it won't work.

//Alternative pagination
$('#button').on( 'click', function () {
    dataTable.page.len( +5 ).draw();
} );

Does any of this look right?

https://jsfiddle.net/6k0bshb6/17/

allan

Is +5 valid Javascript syntax? I'm not sure. The page.len() documentation says that it accepts an integer. It is not relative, so assuming +5 means 5 you are setting the page length to 5.

code-connoisseur

I changed the +5 to 10 (also I have "pageLength": 5 in my settings) and that also does nothing. I'm not sure if it is valid javascript I copied from https://datatables.net/reference/api/page.len%28%29 as one of the examples has a -1 in that code block.

code-connoisseur

I don't think my code block can access the var dataTable I'm going to move it inside the opening settings code block see if that makes it accessable.

code-connoisseur

It now has access to the variable dataTable but it still isn't functioning as it should do?

https://jsfiddle.net/6k0bshb6/18/

code-connoisseur

ahh i have made it work (kind of). So how can I make it +5 each click?

https://jsfiddle.net/6k0bshb6/20/

code-connoisseur

when i use +5 it doesn't work so it must not be valid.

code-connoisseur

How can I access the current amount of rows displayed, is there a variable because I could put a variable inside the code block?

Something like...

//Alternative pagination
$('#button').on( 'click', function () {
    var i = currentpageLength + 5;
    dataTable.page.len( i ).draw();
} );

obviously currentPageLength doesn't exist is there a variable that does?

code-connoisseur

Solved it allan buzzing :D lol

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

wow I solved that myself haha thanks for the push I needed it.

allan

I'd suggest using page.len() to get the current page length, rather than jQuery. But either works :-).

Congrats!

Allan

code-connoisseur

cool I changed it to page.len() thanks allan