Я хотел бы использовать стиль разбивки на страницы для 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: ответ администратора таблицы данных https://datatables.net/forums/discussion/35148/load-more-style-twitter-style-pagination-custom#latest
Упомянутая вами опция iScrollLoadGap недоступна в версии 1.10 — бесконечная прокрутка была удалена в версии 1.10, а вместе с ней и эта опция.
Однако основной принцип по-прежнему остается — у вас может быть кнопка, которую пользователь должен нажать, чтобы загрузить больше строк (либо увеличить размер страницы, либо использовать rows.add(), чтобы добавить больше строк), либо использовать обнаружение прокрутки, чтобы сделать то же самое. .
Аллан
