jquery datatable？datatable官网
大家好，今天来为大家解答jquery datatable这个问题的一些问题点，包括datatable官网也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~
jquery的DataTable插件有熟悉的吗
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。
其主要特点如下：
1.自动分页处理
2.即时表格数据过滤
3.数据排序以及数据类型自动检测
4.自动处理列宽度
5.可通过CSS定制样式
6.支持隐藏列
7.易用
8.可扩展性和灵活性
9.国际化
10.动态创建表格
11.免费的
如何用JQuery.dataTables实现表格插件添加跳转到指定页功能
这个可以参考如下内容:
JQuery.dataTables表格插件添加跳转到指定页
一、解决方案
1.添加自定义工具栏，嵌入文本框
[javascript]view plaincopy
"dom":'l<"toolbar">frtip',//自定义工具栏
[javascript]view plaincopy
//设置工具栏内容
//l-lengthchanginginputcontrol
//f-filteringinput
//t-Thetable!
//i-Tableinformationsummary
//p-paginationcontrol
//r-processingdisplayelement
[javascript]view plaincopy
$("div.toolbar").html('<bstyle="color:red">跳转第</b><inputid="searchNumber"/><bstyle="color:red;">页</b>');
2.监听文本框的change事件，执行插件的调转页面方法
[javascript]view plaincopy
//调转到指定页面索引，注意大小写
varoTable=$('#example1').dataTable();
oTable.fnPageChange(page);
3.插件绘制成功后，绑定文本框的值
[javascript]view plaincopy
//绘制的时候触发，绑定文本框的值
table.on('draw.dt',function(e,settings,data){
varinfo=table.page.info();
//此处的page为0开始计算
console.info('Showingpage:'+info.page+'of'+info.pages);
$('#searchNumber').val(info.page+1);
});
二、完整示例代码
[html]view plaincopy
<tableid="example1"class="tabletable-hovertable-striped">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>班级</th>
</tr>
</thead>
</table>
[javascript]view plaincopy
$(function(){
//注意方法名为DataTable
vartable=$('#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);
//varpage=$('#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(' <bstyle="color:red">跳转第</b><inputid="searchNumber"/><bstyle="color:red;">页</b>');
//绑定分页事件----在切换分页的时候触发
//table.on('page.dt',function(){
//varinfo=table.page.info();
//console.info('Showingpage:'+info.page+'of'+info.pages);
//});
//绘制的时候触发，绑定文本框的值
table.on('draw.dt',function(e,settings,data){
varinfo=table.page.info();
//此处的page为0开始计算
console.info('Showingpage:'+info.page+'of'+info.pages);
$('#searchNumber').val(info.page+1);
});
//监听文本框更改
$('#searchNumber').change(function(){
varpage=$(this).val();
page=parseInt(page)||1;
page=page-1;
//调转到指定页面索引，注意大小写
varoTable=$('#example1').dataTable();
oTable.fnPageChange(page);
});
});
dataTable 加载问题
1、首先是建议排查原因，重新写一个空白方法，然后看看onclick能否调用，用以排查onclick是否调用成功，如果onclick成功的话，可能是你之前方法中的调用有误或者方法内逻辑有点问题。如果同样空白的方法调用不到，那么你就需要检查一下你的这个span标签是否受到冒泡影响或者被什么元素覆盖了：推荐尝试：$('').click()强制触发点击事件看看
2、如果实在没办法建议：通过addEventListener动态添加click事件看看效果
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！