今天想找一个比较不错的表格插件,以前使用过一些,最终觉得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.
这个功能主要是为了提升大数据量时使用的,正好适合我的需求。