本文实例讲解了基于jquery实现表格无刷新分页功能，分享给大家供大家参考，具体内容如下
<html>
<head>
< >面向对象的无刷新表格分页</ >
< http-equiv=\"content-type\" content=\"text/html;charset=utf-8\"/>
< rel=\"stylesheet\" href=\"css/king-table.css\"/>
< type=\"text/ \" src=\"/Public/js/jquery-1.7.1.min.js\"></ >
< type=\"text/ \" src=\"js/king-table.js\"></ >
</head>
<body>
<table id=\"cs_table\" class=\"data-table\"></table>
<br/>
<table id=\"cs_table2\" class=\"data-table\"></table>
< type=\"text/ \">
var data = [];
for(var i=0;i<103;i++){
data[i] = {id:i+1,name:\"jason\"+(i+1),gender:\"男\",age:i+1,address:\"成都\"};
}
var cs = new table({
\"tableId\":\"cs_table\", //必须 表格id
\"headers\":[\"序号\",\"姓名\",\"性别\",\"年龄\",\"地址\"], //必须 thead表头
\"data\":data, //必须 tbody 数据展示
\"displayNum\": 10, //必须 默认 10 每页显示行数
\"groupDataNum\":5, //可选 默认 10 组数
\"display_tfoot\":true, // true/false 是否显示tfoot --- 默认false
\"bindContentTr\":function(){ //可选 给tbody 每行绑定事件回调
this.tableObj.find(\"tbody\").on(\"click\",\'tr\',function(e){
return false;
var tr_index = $(this).data(\"tr_index\"); // tr行号 从0开始
var data_index = $(this).data(\"data_index\"); //数据行号 从0开始
})
},
sort:true, // 点击表头是否排序 true/false --- 默认false
sortContent:[
{
index:0,//表头序号
compareCallBack:function(a,b){ //排序比较的回调函数
var a=parseInt(a.id,10);
var b=parseInt(b.id,10);
if(a < b)
return -1;
else if(a == b)
return 0;
else
return 1;
}
},
{
index:3,//表头序号
compareCallBack:function(a,b){ //排序比较的回调函数
var a=parseInt(a.age,10);
var b=parseInt(b.age,10);
if(a < b)
return -1;
else if(a == b)
return 0;
else
return 1;
}
}
],
specialRows:[
{
row:4,
cssText:{
\"color\":\"#FFCF17\"
}
}
],
search:true // 默认为false 没有搜索
});
</ >
</body>
</html>
继续阅读与本文标签相同的文章
上一篇 :
javascript仿百度输入框提示自动下拉补全
下一篇 :
微软开源的可视化工具，未免太酷炫了吧
-
城市数字化后，新一代内生安全系统可全方位保护
2026-05-14栏目： 教程
-
谷歌也来“唱衰”5G，5G手机只会徒增功耗？为何这么说？
2026-05-14栏目： 教程
-
量子信息和量子技术白皮书合肥宣言在中科大发布
2026-05-14栏目： 教程
-
微信悄悄更新一新功能，来看看！
2026-05-14栏目： 教程
-
打破三大运营商垄断，第四大运营商终于来了！
2026-05-14栏目： 教程