DataTables-사용자 지정 페이지 매김 스타일 만들기 (더 많은 스타일로드)

모바일 친화적 인 DataTable에 페이지 매김 스타일을 사용하고 싶습니다. 클릭하면 현재 보이는 행 아래에 행을 추가하는 더 많은 행을로드하는 버튼을 원합니다.

DataTables에서 기본 옵션으로 사용할 수 없다는 것을 알고 있지만 만드는 것이 어렵지 않아야한다고 생각합니다. 이 페이지 매김 방법을 만들었거나 DataTable의 테이블에서 사용중인 사람이 있습니까?

그렇지 않다면 https://jsfiddle.net/6k0bshb6/16/ 에서 테이블 코드를 수정 하여이 페이지 매김 스타일을 사용하여 테이블을 모바일 친화적으로 만들 수 있습니다.

// 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;
      }
    );
});

업데이트 : 내 테이블에 통합하는 방법을 완전히 이해하지 못했지만 DataTables 웹 사이트에서이 작업을 수행하는 방법에 대한 정보를 찾았습니다.

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

당신이 할 수있는 일은 (나는 그것을 시도하지는 않았지만 왜 작동하지 않을지 생각할 수 없습니다 ...) 스크롤 로딩 간격 (스크롤 하단 이전의 픽셀 수)을 설정하는 것입니다. 새 데이터가로드 됨) 음수 ( http://datatables.net/usage/options#iScrollLoadGap )로 전환 한 다음 테이블 하단에 작은 버튼을 추가합니다 (이 경우 fnDrawCallback을 사용해야 할 수 있음). 다음 데이터 세트를로드합니다 (fnPageChange ( 'next')가이를 수행해야 함).

누구든지 내 테이블에서이 작업을 수행 할 수있는 방법을 알고 있습니까? 누군가 jsfiddle에서 이것을 수행하는 방법을 보여줄 수 있습니까?

업데이트 2 : datatables 관리자 https://datatables.net/forums/discussion/35148/load-more-style-twitter-style-pagination-custom#latest의 응답

언급 한 iScrollLoadGap 옵션은 1.10에서 사용할 수 없습니다. 1.10에서는 무한 스크롤이 제거되었으며 그 옵션과 함께 제거되었습니다.

그러나 기본 원칙은 여전히 ​​남아 있습니다. 사용자가 더 많은 행을로드하기 위해 눌러야하는 버튼 (페이지 크기를 늘리거나 행을 더 추가하려면 rows.add ()을 사용)하거나 스크롤 감지를 사용하여 동일한 작업을 수행 할 수 있습니다. .

앨런