使用jquery插件datatable 遇到的一点问题
今天想找一个比较不错的表格插件，以前使用过一些，最终觉得DataTables不错，决定深入研究一下，便把官方文档的一个带数据库的事例自己亲自在eclipse做了一遍，途中非常坎坷，足足费了一个下午，还好结果比较圆满，下面做一下总结：
1、问题：加载数据问题。
官方给的事例是用Php说明动态加载数据，我是做jsp的，当然得自己做，如何用jsp生成json格式数据成了第一个问题。下面是解决方案。首先下载一个插件，json-taglib.jar 放置WEB-INF/libX下，这样就可以在eclipse中使用如下的<json:object></json:object>标记输出json数据了，注意：我现在做的是jsp输出json格式数据，不是后台servlet生成。json-taglib.jar的使用见网址：http://json-taglib.sourceforge.net/tutorial.html 本人的生成数据方式如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>
<%@page import="cn.heu.po.*,cn.heu.db.*"%>
<%
List<Ajax> l=new ArrayList<Ajax>();
String sql="select * from ajax ";
l=DBUtil.getResults(sql); //查询数据
pageContext.setAttribute("items",l);
// request.setAttribute("items",l); //两种方式均可
%>
<json:object>
<json:array name="aaData" items='${items}' var="item">
<json:array>
<json:property value="${item.engine}"></json:property>
<json:property value="${item.browser}"></json:property>
<json:property value="${item.platform}"></json:property>
<json:property value="${item.version}"></json:property>
<json:property value="${item.grade}"></json:property>
</json:array>
</json:array>
</json:object>此文档主要是生成json格式数据， 注意生成的json格式数据必须是这样的
{
"aaData":
[
["Trident","Internet Explorer 4.0","Win 95+","4","X"],
["Trident","Internet Explorer 5.0","Win 95+","5","C"],
["Other browsers","All others","-","-","U"]
...
]
}然后下面的网页调用该jsp显示后台数据：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table.css";
@import "css/demo_table_jui.css"
@import "css/ui-lightness/jquery-ui-1.8.4.custom.css"
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers",
"oLanguage": { "Search": "搜索:" },
"iDisplayLength": 10,
"bProcessing": true,
"bServerSide": fasle, // 注意该属性允许通过服务端加载数据，设为true即可。现在是jsp在客户端翻译
"sAjaxSource": "jsp/test_dt.jsp", //实际是返回一个json字符串
"oLanguage": { //汉化
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有检索到数据",
"sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
"sInfoEmtpy": "没有数据",
"sProcessing": "正在加载数据...",
"oPaginate":
{
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "尾页"
}
}
}
);
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i>
</div>
<h1>Preamble</h1>
<h1>动态加载数据</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">加载数据。。。</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>这样即可加载数据了。
问题2、出现以下问题的原因：
“当前数据为从第 1 到第 NaN 条数据；总共有 NaN 条记录 (filtered from NaN total entries)”
注意到上边的
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers",
"oLanguage": { "Search": "搜索:" },
"iDisplayLength": 10,
"bProcessing": true,
"bServerSide": fasle, // 注意该属性允许通过服务端加载数据，设为true即可。现在是jsp在客户端翻译
"sAjaxSource": "jsp/test_dt.jsp", //实际是返回一个json字符串bServerSide属性值为false，因为现在是jsp作为数据源，jsp的执行是在客户端进行的，不是在服务器执行，所以设置为false，一开始我设置为true，所以出现上述错误。详细阐述主要参见官方有关该部分的说明：http://datatables.net/usage/server-side
先摘出部分如下：When using server-side processing, DataTables will make an XHR request to the server for each draw of the information on the page (i.e. when paging, sorting, filtering etc). DataTables will send a number of variables to the server to allow it to perform the required processing, and then return the data in the format required by DataTables.
这个功能主要是为了提升大数据量时使用的，正好适合我的需求。