dataTables是jquery推出的一个功能强大的插件
请求数据时，它有很多的参数可以设置。这里主要说明其，API function的使用
在百度上输入关键字“datatables API functions”进行搜索，或者直接进入http://www.datatables.net/api
常用的用fnAddData fnClearTable fnDraw 等，注意的是，如databind = $("#tablename").dataTables();只用这个打他bind对象才包含这些方法，才能被调用。下面结合最近的框架结构给出一个实例。
首先、引入jquery.js dataTable.js以及两个显示的css文件，分别是demo_page.css，demo_table.css。由于css文件中包含了对img的引用，所以应该将example下得img文件 夹放入工程。
定义一个databind = null;后台从数据库取出数据后，处理放入表格，然后加入dataTables方法，注意的是，第一次加载是利用dataTables初始化，以后都统一用fnClearTable 先之前数据，再用fnAddData 添加数据。具体JS代码如下：
//根据限定的条件选出question
thispage.selCondQue = function(){
$("#myDatatable tbody tr").remove();
var param=$("#addQuePage").serializeObject();
var uri = $("#selCondQue").val();
alert(uri)
uri += "?t="+Math.random();
alert(uri);
$.requestJson( uri , thispage.selCondQueCallBack , param);
}
thispage.selCondQueCallBack = function( resdata ){
if( binddata != null ){
alert("clean");
binddata.fnClearTable();
}
$("tbody").html("");
$("tbody").empty("");
$("tbody tr").remove();
//alert(JSON.stringify( resdata ));
var rtn = new Array();
$.each( resdata , function( i , val ){
//alert( thispage.toFormatDate(newDate(val.create_time)) );
if( i >11 ){
//return false;
}
rtn.length = 0;
rtn.push('<tr>');
rtn.push('<td><input type="checkbox"name="check_{0}" id="check_{0}" /></td>'.format(val.idquestion ));
rtn.push('<td>{0}</td>'.format( val.username));
rtn.push('<td>{0}</td>'.format(thispage.toFormatDate(new Date(val.create_time)) ));
rtn.push('<td>{0}</td>'.format(val.content.substring(0,15) ));
rtn.push('</tr>');
if(binddata == null){
$("tbody").append( rtn.join("") );
}else{
binddata.fnAddData([rtn[1],rtn[2],rtn[3],rtn[4]]);
}
});
//$("#myDatatable").fnUpdate(0, 0);
if(binddata == null){
alert("if");
binddata =$("#myDatatable").dataTable({"bProcessing" : true ,'sPaginationType': 'full_numbers',"bDestroy" : true,"cache": false,"bStateSave": false,});
}else{
//alert("else");
//binddata.fnDraw();
//binddata.fnClearTable();
//binddata.fnUpdate(0,0);
//binddata.fnAddData(['1','2','3','4']);
}
//binddata.fnDraw();
//$("#myDatatable").dataTable({"bProcessing": true , 'sPaginationType': 'full_numbers',"bDestroy" :true,"cache" : false,"bStateSave": false,});
//添加dataTable效果
//alert('add xiaoguo');
//$("#myDatatable").dataTable({"bProcessing": true , 'sPaginationType': 'full_numbers',});
}
jsp页面中：
var binddata = null;
<linkrel="stylesheet" type="text/css" href="<c:urlvalue='/css/demo_page.css' />" />
<link rel="stylesheet"type="text/css" href="<c:url value='/css/demo_table.css'/>" />
<scripttype="text/javascript"src="../../js/jquery.dataTables.min-1.8.2.js"></script>
<tablecellpadding="0" cellspacing="0" border="0"class="display" id="myDatatable">
<thead>
<tr>
<th> </th>
<th>上传者</th>
<th>上传时间</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>sdf</td>
<td>sdf</td>
<td>sdf</td>
</tr>
<tr>
<td>wer</td>
<td>wer</td>
<td>wer</td>
</tr>
</tbody>
</table>
还有一种jsp做法，直接那Ajax做数据源
<%@ page language="java"contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags"prefix="spring"%>
<%@ taglib prefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt"uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE htmlPUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>demo 用户查询</title>
<%@ include file="../commonSearch.jsp"%>
<script type="text/javascript">
function _user(){
this.editor = null;
this.artDialog = null;
this.searchTable = null;
}
var thisPage = new _user();
thisPage.createSearchTable=function(){
thisPage.searchTable = $('#userTable').dataTable({
"sPaginationType" : "full_numbers", // defaulttwo_button 分页样式
"bServerSide" : true,// default false 使用server端控制
"bStateSave" : true,// default false 通过cookie保存当前的表信息
"bJQueryUI" : true,// default false 使用jquery的皮肤
"sScrollY" : 300, // 是否开启垂直滚动，以及指定滚动区域大小
"sAjaxSource" : contextPath + '/user/searchUsers.do',// ajax数据源
"sFormId" : "searchForm", // 传递的参数form
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
$(nRow).click(function() {
$(thisPage.searchTable.fnSettings().aoData).each(function() {
$(this.nTr).removeClass('row_selected');
});
if ($(this).hasClass('row_selected'))
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});
return nRow;
},
"fnInitComplete" : function(oInstance, oSettings, json) {
},
"aoColumns" : [{
"bSortable" : false,
"mDataProp" : "",
"fnRender" : function(oObj) {// 列渲染器
return "<input type='checkbox' name=\"paramMap['userIds']\" value='{0}'/>".format(oObj.aData.id);
},
"sTitle" : '<input type="checkbox"οnclick=$.listBoxsSelect(this,"paramMap[\'userIds\']")/>',
"sWidth" : "2%"
}, {
"bSortable" : false,
"mDataProp" : "user_name",
"fnRender" : function(oObj) {// 列渲染器
return "<a href='javascript:void(0)'οnclick='thisPage.toAddUserPage({0});'>{1}</a>".format(oObj.aData.id,oObj.aData.user_name);
},
"sTitle" : "名字",
"sWidth" : "30px"
},{
"bSortable" : false,
"mDataProp" : "favourite",
"sTitle" : "兴趣爱好",
"sWidth" : "30px"
} ]
});
};
$(function(){
thisPage.createSearchTable();
$("#btnSearch").click(function () {
thisPage.searchTable.fnDraw();
});
});
</script>
<script type="text/javascript"src="<c:url value='/js/modules/user/user.js'/>"></script>
</head>
<body id="dt_example">
<div id="testDiv"></div>
<form id="searchForm"name="searchForm" method="post">
<div id="demo"style="width:850px">
<fieldset>
<label for="name">姓名：</label>
<input type="text"name="paramMap['name']" id="name" class="textui-widget-content ui-corner-all" />
</fieldset>
<div>
<input type="button"value="查询" id="btnSearch"/>
<input type="button"value="新增" οnclick="thisPage.toAddUserPage()"/>
<input type="button"value="删除" οnclick="thisPage.delUser()"/>
</div>
<table cellpadding="0"cellspacing="0" border="0"class="display" id="userTable">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
<iframe id="_frame"style="display: none"></iframe>
</body>
</html>
扫一扫
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
