带有分页排序功能的表格插件的使用（通过ajax获取后台数据）

最新推荐文章于 2024-04-23 00:34:50 发布

Sun9528

最新推荐文章于 2024-04-23 00:34:50 发布

阅读量3.9k

点赞数 3

分类专栏：插件的使用文章标签： ajax jquery 插件数据分页

本文链接：https://blog.csdn.net/sun9528/article/details/70154968

版权

插件的使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一般带有分页排序功能的表格在jquery中只需给出一句代码就可以显示静态数据（如图一所示），比如在699#项目中使用的表格插件slimtable中只需要一句： $("#exampletable").slimtable()即可实现该表格表格的形式。但是如果从数据库查得的数据插入到该表格插件中，尤其是需要不断查询不断插入数据的情况下，每次插入数据都会调用 $("#exampletable").slimtable()就会造成一个问题：表格插件的形式会多次被加载，比如说分页按钮在下一次数据插入的时候上一次的分页按钮还会显示，那么这个时候可能就会考虑要不要修改源码，修改源码肯定是可以的但是比较浪费时间。其实可以不用改源码来解决这个问题：就在再次调用该插件之前，把上次加载进来的样式与数据全部删除(删除样式时需要元素的id或者class属性，这个时候可以通过浏览器的审查元素来查看元素的class或者id)，然后重新加载新的数据与样式。下面以699#项目的一个功能为例说明问题：

html代码：

<html>
<head>
<title>带有分页排序功能的表格</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/slimtable.min.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>
<link rel="stylesheet" href="css/slimtable.css">
<link rel="stylesheet" href="css/site.css">
</head>
<body>
<br/>
<input id="startDate" type="text" value="2000-01-10 00:00:12"/>
<br/>
<input id='endDate' type='text' value="2017-01-10 00:00:12" />
<input id="search" type="button" value="查询"/>
<br/>
<table id="exampletable">
<thead id="thead1">
<tr>
<th>序号</th>
<th>型号</th>
<th>批次</th>
<th>任务系列号</th>
<th>工艺文件编号</th>
<th>时间</th>
</tr>
</thead>
<tbody id="tbody1"></tbody>
</table>
</body>
</html>

myjs.js代码：

$(function() {
$("#exampletable").slimtable();
$(".slimtable-paging-seldiv").remove();//干掉可以自己选择显示几条数据的功能
$("#search").click(function () {
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
$.ajax({
url:"/avvii/chart/deviceLog",
type:"post",
data:{
"item":"commu",
"startDate": startDate,
"endDate": endDate
},
success: function (data) {
$("#tbody1").empty(); //成功查得数据之后，将原来的表格中的数据先全部清空
var JsonObjs = eval("(" + data + ")");
for(var i = 0; i < JsonObjs.length; i++){
var num = JsonObjs[i]['num'];
var craftType = JsonObjs[i]['craftType'];
var craftNum = JsonObjs[i]['craftNum'];
var taskSn = JsonObjs[i]['taskSN'];
var techFileInfo = JsonObjs[i]['taskTechFileInfo'];
var time = JsonObjs[i]['time'];
var tr = "<tr>" +
"<td align='center'>" + num + "</td>"+
"<td align='center'>"+craftType + "</td>" +
"<td align='center'>"+ craftNum + "</td>" +
"<td align='center'>"+ taskSn+"</td>"+
"<td align='center'>"+techFileInfo+"</td>"+
"<td align='center'>"+time+"</td>"+
"</tr>";
$("#tbody1").append(tr); //将查得的数据每一条都插入到表格中
}
$(".slimtable-paging-div").remove();//将表格下面的那一行的东西去掉，是真的删除掉。因为下面的$("#exampletable").slimtable();代码会将这一行东西再次加上
$(".slimtable-sprites").remove();
$(".slimtable-sortdesc").remove();//这一行与上一行都是将表头的正的与倒的三角形删掉，因为下面的代码会将其再次加上
$("#exampletable").slimtable();//加载表格
$(".slimtable-paging-seldiv").remove();//干掉可以自己选择显示几条数据的功能
}
});
});
});

多次加载数据之后也不会出现之前的问题，效果如图二所示。