没有合适的资源?快使用搜索试试~ 我知道了~
JQuery.dataTables表格插件添加跳转到指定页
1 下载量 118 浏览量
2020-12-09
16:34:59
上传
评论
收藏 55KB PDF 举报
温馨提示
试读
2页
一、解决方案 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
资源详情
资源评论
资源推荐
JQuery.dataTables表格插件添加跳转到指定页表格插件添加跳转到指定页
一、解决方案一、解决方案
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' },
weixin_38673237
- 粉丝: 2
- 资源: 843
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0