datatable java实现分页_datatables增加跳转指定页功能, datatable自定义分页

DataTable使用方便，快捷。但有时候用户需求对分页有需求，例如输入页数进行分页跳转。

这样就需要扩展功能了，datatable也支持自定义扩展，下面以使用DataTable bootstrap分页为例

1. 初始化DataTable

var $table = $('#listTable');

var listTable = $table.DataTable({

language: { url: path + '/resources/js/bootstrap/dtChinese.json' },

searching: false, //搜索栏

ordering: true, //排序

scrollX: true,

scrollY: scrollY, //表格滚动区高度

columns: columns,

serverSide: true, //打开后台分页

processing: true, //打开数据加载时的等待效果

lengthChange: false, //禁用每页显示的记录数

sPaginationType: "bootstrap", //bootstrap / full_numbers

// lengthMenu: [

// [20, 50, 100, -1],

// [20, 50, 100, "All"]

// ],

pageLength: 20,

ajax: path + '/searchBase?name=' + sqlStr + '&type=getSqlValues&dataBase=' + opt.dataBase

});

2. 扩展功能

DataTable自定义分页(bootstrap分页)扩展代码如下

/* Set the defaults for DataTables initialisation */

$.extend( true, $.fn.dataTable.defaults, {

// "sDom": "r>t>",

"sPaginationType": "bootstrap",

"oLanguage": {

"sSearch": "快速搜索:",

"bAutoWidth": true,

"sLengthMenu": "每页显示 _MENU_ 条记录",

"sZeroRecords": "Nothing found - 没有记录",

"sInfo": "_START_ 到 _END_ 条,共 _TOTAL_ 条",

"sInfoEmpty": "显示0条记录",

"sInfoFiltered": "(从 _MAX_ 条中过滤)",

// "sProcessing":"

",

"oPaginate": {

"sPrevious": "",

"sNext": "",

"sLast": ">>",

"sFirst": "<

}

}

} );

/* Default class modification */

$.extend( $.fn.dataTableExt.oStdClasses, {

"sWrapper": "dataTables_wrapper form-inline"

} );

/* API method to get paging information */

$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )

{

return {

"iStart": oSettings._iDisplayStart,

"iEnd": oSettings.fnDisplayEnd(),

"iLength": oSettings._iDisplayLength,

"iTotal": oSettings.fnRecordsTotal(),

"iFilteredTotal": oSettings.fnRecordsDisplay(),

"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),

"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )

};

};

/* Bootstrap style pagination control */

$.extend( $.fn.dataTableExt.oPagination, {

"bootstrap": {

"fnInit": function( oSettings, nPaging, fnDraw ) {

var oLang = oSettings.oLanguage.oPaginate;

var fnClickHandler = function ( e ) {

e.preventDefault();

if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {

fnDraw( oSettings );

}

};

$(nPaging).addClass('pagination').append(

'

• '+

'

'+oLang.sFirst+''+

'

'+oLang.sPrevious+''+

'

'+oLang.sNext+''+

'

'+oLang.sLast+''+

''+

'

'

);

//datatables分页跳转

$(nPaging).find(".redirect").keyup(function(e){

var ipage = parseInt($(this).val());

var oPaging = oSettings.oInstance.fnPagingInfo();

var timer = null;

if(isNaN(ipage) || ipage<1){

ipage = 1;

}else if(ipage>oPaging.iTotalPages){

ipage=oPaging.iTotalPages;

}

$(this).val(ipage);

ipage--;

oSettings._iDisplayStart = ipage * oPaging.iLength;

clearTimeout(timer);

timer = setTimeout(function(){

fnDraw( oSettings );

},600);

});

var els = $('a', nPaging);

$(els[0]).bind( 'click.DT', {

action: "first"

}, fnClickHandler );

$(els[1]).bind( 'click.DT', {

action: "previous"

}, fnClickHandler );

$(els[2]).bind( 'click.DT', {

action: "next"

}, fnClickHandler );

$(els[3]).bind( 'click.DT', {

action: "last"

}, fnClickHandler );

},

"fnUpdate": function ( oSettings, fnDraw ) {

var iListLength = 5;

var oPaging = oSettings.oInstance.fnPagingInfo();

var an = oSettings.aanFeatures.p;

var i, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

if ( oPaging.iTotalPages < iListLength) {

iStart = 1;

iEnd = oPaging.iTotalPages;

}

else if ( oPaging.iPage <= iHalf ) {

iStart = 1;

iEnd = iListLength;

} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {

iStart = oPaging.iTotalPages - iListLength + 1;

iEnd = oPaging.iTotalPages;

} else {

iStart = oPaging.iPage - iHalf + 1;

iEnd = iStart + iListLength - 1;

}

for ( i=0, ien=an.length ; i

// Remove the middle elements

($('li:gt(1)', an[i]).filter(':not(:last)')).filter(':not(:last)').remove();

// Add the new list items and their event handlers

for ( j=iStart ; j<=iEnd ; j++ ) {

sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';

$('

'+j+'')

.insertBefore( $('.next', an[i])[0] )

.bind('click', function (e) {

e.preventDefault();

oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;

fnDraw( oSettings );

} );

}

// Add / remove disabled classes from the static elements

if ( oPaging.iPage === 0 ) {

$('li:lt(2)', an[i]).addClass('disabled');

} else {

$('li:lt(2)', an[i]).removeClass('disabled');

}

if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {

$('.next', an[i]).addClass('disabled');

$('li:last', an[i]).addClass('disabled');

} else {

$('.next', an[i]).removeClass('disabled');

$('li:last', an[i]).removeClass('disabled');

}

}

}

}

} );

/*

* TableTools Bootstrap compatibility

* Required TableTools 2.1+

*/

if ( $.fn.DataTable.TableTools ) {

// Set the classes that TableTools uses to something suitable for Bootstrap

$.extend( true, $.fn.DataTable.TableTools.classes, {

"container": "DTTT btn-group",

"buttons": {

"normal": "btn",

"disabled": "disabled"

},

"collection": {

"container": "DTTT_dropdown dropdown-menu",

"buttons": {

"normal": "",

"disabled": "disabled"

}

},

"print": {

"info": "DTTT_print_info modal"

},

"select": {

"row": "active"

}

} );

// Have the collection use a bootstrap compatible dropdown

$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {

"collection": {

"container": "ul",

"button": "li",

"liner": "a"

}

} );

}