使用jquery插件datatable 遇到的一点问题

最新推荐文章于 2023-05-30 19:39:52 发布

最新推荐文章于 2023-05-30 19:39:52 发布 · 754 阅读

文章标签：

#datatables #jQuery #ViewUI

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用DataTables插件结合JSON数据实现动态加载数据的功能，并解决了在使用过程中遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天想找一个比较不错的表格插件，以前使用过一些，最终觉得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.

这个功能主要是为了提升大数据量时使用的，正好适合我的需求。