datatables的Bootstrap样式的分页怎么添加首页和尾页

/* Jion 修改增加 首页、末页 注意修改*/

/* Set the defaults for DataTables initialisation */

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

"sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",

"sPaginationType": "bootstrap",

"oLanguage": {

"sLengthMenu": "_MENU_ records per page"

}

} )

/* Default class modification */

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

"sWrapper": "dataTables_wrapper form-inline",

"sFilterInput": "form-control input-sm",

"sLengthSelect": "form-control input-sm"

} )

/* 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":          oSettings._iDisplayLength === -1 ?

0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),

"iTotalPages":    oSettings._iDisplayLength === -1 ?

0 : 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).append(

'<ul class="pagination">'+

'<li class="first disabled"><a href="#">'+oLang.sFirst+'</a></li>'+//此处添加

'<li class="prev disabled"><a href="#">'+oLang.sPrevious+'</a></li>'+

'<li class="next disabled"><a href="#">'+oLang.sNext+'</a></li>'+

'<li class="last disabled"><a href="#">'+oLang.sLast+'</a></li>'+//此处添加

'</ul>'

)

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<ien  i++ ) {

// Remove the middle elements

$('li:gt(1)', an[i]).filter(':lt(-2)').remove()//此处修改 $('li:gt(0)', an[i]).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"' : ''

$('<li '+sClass+'><a href="#">'+j+'</a></li>')

.insertBefore( $('li:eq(-2)', an[i])[0] )//此处修改 .insertBefore( $('li:last', 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') //此处修改 $('li:first', an[i]).addClass('disabled')

} else {

$('li:lt(2)', an[i]).removeClass('disabled') //此处修改$('li:first', an[i]).removeClass('disabled')

}

这个可以参考如下内容:

JQuery.dataTables表格插件添加跳转到指定页

一、解决方案

1.添加自定义工具栏，嵌入文本框

[javascript] view plain copy

"dom": 'l<"toolbar">frtip', //自定义工具栏

[javascript] view plain copy

//设置工具栏内容

//l - length changing input control

//f - filtering input

//t - The table!

//i - Table information summary

//p - pagination control

//r - processing display element

[javascript] view plain copy

$("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red">页</b>')

2.监听文本框的change事件，执行插件的调转页面方法

[javascript] view plain copy

//调转到指定页面索引 ，注意大小写

var oTable = $('#example1').dataTable()

oTable.fnPageChange(page)

3.插件绘制成功后，绑定文本框的值

[javascript] view plain copy

//绘制的时候触发，绑定文本框的值

table.on('draw.dt', function (e, settings, data) {

var info = table.page.info()

//此处的page为0开始计算

console.info('Showing page: ' + info.page + ' of ' + info.pages)

$('#searchNumber').val(info.page + 1)

})

二、完整示例代码

[html] view plain copy

<table id="example1" class="table table-hover table-striped">

<thead>

<tr>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>生日</th>

<th>班级</th>

</tr>

</thead>

</table>

[javascript] view plain copy

$(function () {

//注意方法名为DataTable

var table = $('#example1').DataTable({

"dom": 'l<"toolbar">frtip', //自定义工具栏

"pagingType": "full_numbers",

lengthMenu: [3, 5, 10],

processing: true,//是否使用进度条

serverSide: true,//是否启用数据库加载

ajax: {

url: '/tableone/getlist',

type: 'post',

data: function (d) {

d.name = '张三'

/*

* 自定义aja参数

* 特别说明，此处可以重写控件的默认参数，比如分页参数

*/

// d.start = 0

//console.info(d)

//var page = $('#searchNumber').val()

//page = parseInt(page) || 1

//d.start = (page - 1) * d.length

}

},

//指定列绑定的字段

columns: [

{ data: 'sno' },

{ data: 'sname' },

{ data: 'ssex' },

{ data: 'sbirthday' },

{ data: 'class' }

],

order: [

[3, 'desc']

]

})

$("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red">页</b>')

//绑定分页事件----在切换分页的时候触发

//table.on('page.dt', function () {

//var info = table.page.info()

//console.info('Showing page: ' + info.page + ' of ' + info.pages)

//})

//绘制的时候触发，绑定文本框的值

table.on('draw.dt', function (e, settings, data) {

var info = table.page.info()

//此处的page为0开始计算

console.info('Showing page: ' + info.page + ' of ' + info.pages)

$('#searchNumber').val(info.page + 1)

})

//监听文本框更改

$('#searchNumber').change(function () {

var page = $(this).val()

page = parseInt(page) || 1

page = page - 1

//调转到指定页面索引 ，注意大小写

var oTable = $('#example1').dataTable()

oTable.fnPageChange(page)

})

})

{data: "id"},

{data: "name"},

{data: "ip"},

{data: "description"},

{data: null}

],

columnDefs:[{

targets: 4,

render: function (data, type, row, meta) {

return '<a type="button" class="btn btn-danger btn-block" href="#" onclick=delFromID(' + row.id + ') >删除</a>'

}

},

{ "orderable": false, "targets": 4 },

],

language:{

"sProcessing": "处理中...",

"sLengthMenu": "显示 _MENU_ 项结果",

"sZeroRecords": "没有匹配结果",

"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",

"sInfoEmpty":"显示第 0 至 0 项结果，共 0 项",

"sInfoFiltered": "(由 _MAX_ 项结果过滤)",

"sInfoPostFix": "",

"sSearch": "搜索:",

---