DataTables - Özel Sayfalandırma Stilini Oluşturun (Daha Fazla Stil Yükle)

Question

DataTable'ın mobil uyumlu dostu için bir sayfalama stili kullanmak istiyorum, yalnızca tıklandığında tıklandığında daha fazla satır yüklemek istiyorum. satırlar.

Bu, DataTable'larda varsayılan seçenek olarak kullanılamaz biliyorum, ancak oluşturmanın zor olmaması gerektiğine inanıyorum. Bu sayfalama yöntemini kim oluşturdu ya da bir DataTable tablosunda kullanımda gördü mü? Tablonun mobil dostu olmasını sağlamak için bu sayfalama stilini kullanmak için tablonun kodunu nasıl değiştirebilirim? 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; 
     } 
    ); 
}); 

GÜNCELLEME: Ben tamamen benim tabloya nasıl entegre anlamıyorum rağmen DataTable web sitesinde bunun nasıl yapılacağı hakkında bazı bilgiler bulduk. muhtemelen (... Ben denedim değil, ama işe yaramaz neden düşünemiyorum) yapabilirdi Ne

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

(kaydırma yükleme boşluğu ayarlamaktır Yeni veri yüklendiğinde, kaydırmanın altından önceki piksel sayısı) negatif bir sayıya ( http://datatables.net/usage/options#iScrollLoadGap) ve daha sonra tablonun altına küçük bir düğme ekleyin (bunun için fnDrawCallback kullanmanız gerekebilir). Bir sonraki veri seti (fnPageChange ('sonraki') bunu yapmalıdır).

Bu işi masamla nasıl yapabilirim bilen var mı? Birisi bana jsfiddle üzerinde nasıl yapılacağını gösterebilir mi?

GÜNCELLEME 2: - sonsuz 1.10'da çıkarıldı kaydırma ve onunla bu seçeneği datatables yöneticiden Tepki https://datatables.net/forums/discussion/35148/load-more-style-twitter-style-pagination-custom#latest

Sözünü iScrollLoadGap seçeneği 1.10 kullanılamaz. Eğer ( sayfa boyutunu artırmak veya daha fazla satır eklemek için) (rows.add kullanmak ya) kullanıcı daha fazla satır yüklemek için basın gereken bir düğmesi veya kaydırma kullanabilirsiniz ya - Temel ilke geçerliliğini korumaktadır Ancak

Aynı şeyi yapmak için algılama.

Allan

Answer 1

..

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

Answer 2

gibi bir şey kullanabilirsiniz

: sadece mobil üzerinde çalışmak ve mevcut işlevini kullanan olacak

$(window).on("swipeleft", $("#example_next").click()); 

$(window).on("swiperight", $("#example_previous").click()); 

... çözüldü