DDR爱好者之家 Design By 杰米
一、解决方案
1.添加自定义工具栏,嵌入文本框
"dom": 'l<"toolbar">frtip', //自定义工具栏 //设置工具栏内容 //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 print"div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</b>');
2.监听文本框的change事件,执行插件的调转页面方法
//调转到指定页面索引 ,注意大小写 var oTable = $('#example1').dataTable(); oTable.fnPageChange(page);
3.插件绘制成功后,绑定文本框的值
//绘制的时候触发,绑定文本框的值 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); });
二、完整示例代码
<table id="example1" class="table table-hover table-striped"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>生日</th> <th>班级</th> </tr> </thead> </table> $(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); }); });
显示如下:
以上所述是小编给大家介绍的JQuery.dataTables表格插件添加跳转到指定页,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]