自定义分页 html,javascript – 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 '

Hidden Value: ' + value + '

';

}

// 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 = $('Show all')

.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('' + d + '')

});

});

}

});

// 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网站上找到了一些关于如何做到这一点的信息,尽管我还不完全了解如何将它集成到我的表中.

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 ( 07002 ) 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).

有人知道如何用我的桌子做这个工作吗？有人可以告诉我如何在jsfiddle上这样做吗？

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