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();//干掉可以自己选择显示几条数据的功能
}
});
});
});
多次加载数据之后也不会出现之前的问题,效果如图二所示。
图一
图二