Jquery DataTables相关示例

一、Jquery-DataTables

DataTables 是jquery的一个开源的插件。它具有高度灵活的特性，基于渐进增强的基础，可以为任何表格添加交互。它特性如下：

提供分页，搜索和多列排序；
支持所有类型的数据源：
DOM，javascript，Ajax和服务器端的处理；
简洁的主题，DataTables,JQuery UI，Bootstrap，Foundation；
支持各种扩展，包括编辑器, 表格工具, 固定列等；
丰富的可配置选项、富有表现力的api；

　　DataTabels下载地址为：http://www.datatables.net/download/index。这里使用到的版本是1.10.6。

二、示例代码

1、数据源为javascript数组

　　网页代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8"/>

 <title>jquery-datatable 版本  1.10.6</title>

     <style type="text/css">

     /** 表格内容截取 */

     table{table-layout: fixed;border-collapse: collapse;}

     td{overflow: hidden;text-overflow:ellipsis;} /**/

     </style>

 </head>

 <body>

     <div>

         <table border="1"  id="example_2"  style="width: 100%;" >

         </table>

     </div>

 <script type="text/javascript" src="./script/jquery-1.10.2.min.js"></script>

 <script type="text/javascript" src="./plugins/data-table-1.10.6/jquery.dataTables.js"></script>

 <script type="text/javascript">

 var dataSet = [

     ['Trident','InternetInternet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Internet Explorer 4.0','Win 95+','4','X'],

     ['Trident','Internet Explorer 5.0','Win 95+','5','C'],

     ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],

     ['Trident','Internet Explorer 6','Win 98+','6','A'],

     ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],

     ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],

     ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],

     ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],

     ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],

     ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],

     ['Gecko','Camino 1.0','OSX.2+','1.8','A'],

     ['Gecko','Camino 1.5','OSX.3+','1.8','A'],

     ['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],

     ['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],

     ['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],

     ['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],

     ['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],

     ['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],

     ['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],

     ['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],

     ['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],

     ['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],

     ['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],

     ['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],

     ['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],

     ['Gecko','Epiphany 2.20','Gnome','1.8','A'],

     ['Webkit','Safari 1.2','OSX.3','125.5','A'],

     ['Webkit','Safari 1.3','OSX.3','312.8','A'],

     ['Webkit','Safari 2.0','OSX.4+','419.3','A'],

     ['Webkit','Safari 3.0','OSX.4+','522.1','A'],

     ['Webkit','OmniWeb 5.5','OSX.4+','420','A'],

     ['Webkit','iPod Touch / iPhone','iPod','420.1','A'],

     ['Webkit','S60','S60','413','A'],

     ['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],

     ['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],

     ['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],

     ['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],

     ['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],

     ['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],

     ['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],

     ['Presto','Opera for Wii','Wii','-','A'],

     ['Presto','Nokia N800','N800','-','A'],

     ['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],

     ['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],

     ['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],

     ['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],

     ['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],

     ['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],

     ['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],

     ['Misc','NetFront 3.1','Embedded devices','-','C'],

     ['Misc','NetFront 3.4','Embedded devices','-','A'],

     ['Misc','Dillo 0.8','Embedded devices','-','X'],

     ['Misc','Links','Text only','-','X'],

     ['Misc','Lynx','Text only','-','X'],

     ['Misc','IE Mobile','Windows Mobile 6','-','C'],

     ['Misc','PSP browser','PSP','-','C'],

     ['Other browsers','All others','-','-','U']

 ];

 $(document).ready(function(){

     $('#example_2').dataTable( {

         "data": dataSet,

         "aoColumns": [

             { "title": "引擎" , "sWidth" : "30%" },

             { "title": "浏览器" , "sWidth" : "10%"},

             { "title": "平台" , "sWidth" : "20%" },

             { "title": "版本", "class": "center" , "sWidth" : "20%"},

             { "title": "等级", "class": "center" , "sWidth" : "20%"}

         ],

         "bPaginate": true, //开关，是否显示分页器

         "bServerSide": false,//服务器端分页

         "bSort": false, //开关，是否启用各列具有按列排序的功能

         "bSortClasses": false,

         "bFilter": false, //开关，是否启用客户端过滤器

         "bAutoWidth": false, //自动设置宽度关闭

         "aoColumnDefs" : [ {

             sDefaultContent : '',

             aTargets : [ '_all' ]

         } ],

         "oLanguage": {

             "sProcessing": "正在加载中......",

             "sLengthMenu": "每页显示 _MENU_ 条记录",

             "sZeroRecords": "对不起，查询不到相关数据！",

             "sEmptyTable": "表中无数据存在！",

             "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",

             "sInfoFiltered": "数据表中共为 _MAX_ 条记录",

             "sInfoEmpty" : "显示0到0条记录",

             "sSearch": "搜索",

             "oPaginate": {

                 "sFirst": "首页",

                 "sPrevious": "上一页",

                 "sNext": "下一页",

                 "sLast": "末页"

             }

         } //多语言配置

     });   

 });

 </script>

 </body>

 </html>

2、动态读取服务器数据

　　网页代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8"/>

 <title>jquery-datatable 版本  1.10.6</title>

     <style type="text/css">

     /** 表格内容截取 */

     table{table-layout: fixed;border-collapse: collapse;}

     td{overflow: hidden;text-overflow:ellipsis;} /**/

     </style>

 </head>

 <body>

     <div>

         <table  id="sample_1">

             <thead>

             <tr>

                 <th>序号</th>

                 <th>学号</th>

                 <th>姓名</th>

                 <th>年龄</th>

                 <th>性别</th>

                 <th>籍贯</th>

                 <th>班级</th>

                 <th>生日</th>

                 <th>操作</th>

             </tr>

             </thead>

             <tbody>

             </tbody>

         </table>

     </div>

 <script type="text/javascript" src="./script/jquery-1.10.2.min.js"></script>

 <script type="text/javascript" src="./plugins/data-table-1.10.6/jquery.dataTables.js"></script>

 $(document).ready(function(){ 

      var oTable = $('#sample_1').dataTable( {

         "sAjaxSource": "${ctx}/student/data.action",

         "sServerMethod": "POST" ,   //以post的方式提交数据

         "fnServerParams": function ( aoData ) {//此处设置查询条件，根据条件进行查询列表

         　　aoData.push( { "name": "nage", "value": $("#name").val()} );//年龄过滤

         　　aoData.push( { "name": "classId", "value": $("#classId").val()} );//班级id过滤

          　 aoData.push( { "name": "birthday", "value": $("#birthday").val()} );  //生日过滤

          　 aoData.push( { "name": "city", "value": $("#city").val()} );  //生日过滤

         },

         "aoColumns": [

             {  "sName": "index",

                 "sWidth": "4%", //设置宽度

                 "sClass": "center",

                 "bSearchable": false,

                 "bStorable": false,

                 "fnRender": function (a) {

                     return a.iDataRow + 1;

                 }

             },

             {    "mData": "no",

                 "sWidth": "10%"

             },

             {    "mData": "name" ,

                 "sWidth": "10%"

             },

             {    "mData": "graduationDate" ,

                 "sWidth": "10%"

             },

             {    "mData": "gender" ,

                 "sWidth": "10%"

             },

             {    "mData": "city" ,

                 "sWidth": "10%"

             },

             {    "sName": "className",

                 "sWidth": "10%",

                 "sClass": "center",

                 "bSearchable": false,

                 "bStorable": false,

                 "fnRender": function (a) {

                 var result="";

                     jQuery.ajax({//通过classId获取班级名称

                         url: "${ctx}/class/"+a.aData.classId,

                         type: "get",

                         async: false,  // false 为同步

                         dataType: "json",

                         success: function(data){

                             result = data.class.id;

                         }

                     });

                     return result;

                 }

             },

             {    "mData": "birthday",

                 "sWidth": "10%"

             },

             {    "sName": "action",

                 "sWidth": "10%",

                 "sClass": "center",

                 "bSearchable": false,

                 "bStorable": false,

                 "fnRender": function (a) {

                     var s = "<a  href=\"${ctx}/control/monitor/rule/step1.action?rid=" + a.aData.id + "\">修改</a> ";

                     var e = "<a  href=\"${ctx}/control/monitor/rule/detail.action?rid=" + a.aData.id + "\">详情</a> ";

                     return s + e;

                 }

             }

         ],

         "bPaginate": true, //开关，是否显示分页器

         "bServerSide": true,//服务器端分页

         "bSort": false, //开关，是否启用各列具有按列排序的功能

         "bSortClasses": false,

         "bFilter": false, //开关，是否启用客户端过滤器

         "sSearch" : false, //不过滤

         "sAjaxDataProp":  "rows",  //服务器端返回的json中对象数组对应的key

         "bAutoWidth": false, //自动设置宽度关闭

         "aoColumnDefs" : [ {

115　　　　　　  sDefaultContent : '',

         　　aTargets : [ '_all' ]

         } ],

         "oLanguage": {

             "sProcessing": "正在加载中......",

             "sLengthMenu": "每页显示 _MENU_ 条记录",

             "sZeroRecords": "对不起，查询不到相关数据！",

             "sEmptyTable": "表中无数据存在！",

             "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",

             "sInfoFiltered": "数据表中共为 _MAX_ 条记录",

             "sInfoEmpty" : "显示0到0条记录",

             "sSearch": "搜索",

             "oPaginate": {

                 "sFirst": "首页",

                 "sPrevious": "上一页",

                 "sNext": "下一页",

                 "sLast": "末页"

             }

         } //多语言配置

     });

 });

 </script>

 </body>

 </html>

　　服务器端代码如下：

 /**

      * 列表数据返回，jquery-data-table（此处采用springmvc实现）

      * @param iDisplayStart 忽略前面的记录数

      * @param iDisplayLength 页面大小

      * @param request

      * @return

      * @throws Exception

      */

 @RequestMapping("/data")

     @ResponseBody

     public Map<String, Object> jsonList(@RequestParam("iDisplayStart") int iDisplayStart,

             @RequestParam("iDisplayLength") int iDisplayLength, HttpServletRequest request) throws Exception {

         Map<String, Object> params = new HashMap<String, Object>();

         params.setParameter("_currpage", iDisplayStart + 1);//转换成当前页号

         params.setParameter("_pagesize", iDisplayLength);//页面大小

         //查询条件

         params.setParameter("name", request.getParameter("name"));

         params.setParameter("classId", request.getParameter("classId"));

         params.setParameter("birthday", request.getParameter("birthday"));

         params.setParameter("city", request.getParameter("city")); 

         List datas = null;

         int total = 0;

         try {

             total = this.getService().count(params);//总记录数

             datas = this.getService().query(params);//当前页面记录

         } catch (Exception e) {

             LOGGER.error("jsonListAction异常", e);

             Map<String, Object> rtn = new HashMap<String, Object>();

             rtn.put("code", "0");

             rtn.put("error", "查询参数异常：" + e.getMessage());

             return rtn;

         }

         Map<String, Object> result = new HashMap<String, Object>();

         result.put("iTotalDisplayRecords", total);

         result.put("iTotalRecords", total);

         result.put("rows", datas);

         return result;

     }

　　服务器端返回的json数据格式如下：

{"iTotalDisplayRecords":30, "iTotalRecords":30, "rows":[

{"id": "0001", "name" : "张三", "no" : "090001", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "北京" , "birthday" : "1992-07-28" , "classId" : "10001" },

{"id": "0001", "name" : "李四", "no" : "090002", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "上海" , "birthday" : "1992-07-28" , "classId" : "10001" },

{"id": "0001", "name" : "王二", "no" : "090003", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "杭州" , "birthday" : "1992-07-28" , "classId" : "10001" },

{"id": "0001", "name" : "赵六", "no" : "090004", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },

{"id": "0001", "name" : "张三2", "no" : "090005", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },

{"id": "0001", "name" : "张三3", "no" : "090006", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },

{"id": "0001", "name" : "张三4", "no" : "090007", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },

{"id": "0001", "name" : "张三5", "no" : "090008", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },

{"id": "0001", "name" : "张三6", "no" : "090009", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },

{"id": "0001", "name" : "张三7", "no" : "0900010", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001"},

{"id": "0001", "name" : "张三8", "no" : "090001", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" }]}

Jquery DataTables相关示例的更多相关文章

JQuery插件datatables相关api
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
JQuery插件之Jquery.datatables.js用法及api
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...
jquery datatable真实示例
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodin ...
[jQuery]jQuery DataTables插件自定义Ajax分页实现
前言昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
jquery.datatables中文使用说明
http://www.cnblogs.com/taizhouxiaoba/archive/2009/03/17/1414426.html 本文共四部分:官网 | 基本使用|遇到的问题|属性表一:官方 ...
jQuery datatables
jQuery datatables 属性,用例参考:http://datatables.club/example/ http://blog.csdn.net/mickey_miki/article/ ...
jQuery DataTables && Django serializer
jQuery DataTables https://www.datatables.net 本文参考的官方示例 http://datatables.net/release-datatables/exam ...
aspx中的表单验证 jquery.validate.js 的使用以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲上面是效果,下面来说使用步骤 jQuery.Valid ...
jquery.dataTables插件使用例子详解
DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格效果图代码 <!doctype html> & ...

随机推荐

elasticsearch配置
配置文件详解1.0版配置文件位于es根目录的config目录下面,有elasticsearch.yml和logging.yml两个配置,主配置文件是elasticsearch.yml,日志配置文件是 ...
attachEvent和addEventListener区别
一般来说,可以直接封装成这种形式: var addEvent = function(element,type,handler){ if(element.addEventListener){ //DOM ...
MVC显示详细记录Without Entity Framework
看过此篇<MVC用非Entity Framework将数据显示于视图(二)>http://www.cnblogs.com/insus/p/3364482.html 了解到把数据库中数据表的 ...
Winform开发框架之通用高级查询模块
最近一直忙于公司的事情,虽然一直在做一些相关的技术研究,但是很久没能静下心来好好写写博客文章了,想想也有半个月之多了,这半个月来,也一直致力于改善我的WInform开发框架,使得自己及客户使用起来更加 ...
【C#】OOP之多态那点事
前言: 对菜鸟开发者的忠告:花一万个小时练习 Coding,不要浪费一万小时无谓地 Debugging(也就说看代码) 看上面的UML图,我们创建一个抽象的Instrument类,类中有一个抽象方法p ...
发布在IIS的网站，可以用本机IP登录访问，用localhost不可登录访问
之前在IIS发布一个测试的网址,但是用本机IP可以访问,用localhost不可访问
SqlServer知识点记录分享
知识点介绍双向检索:这里就不大话概念了,直接说它的作用 ISNULL()函数:判断函数是否有值,如果变量没有赋值就给定指定的值,下面的例子就是如果@TOTALCOUNT变量为NULL那么就赋值为空字 ...
java.lang.NullPointerException org.apache.jsp.WEB_002dINF.pages.imagecheck.test_jsp._jspInit(test_jsp.java:22)的原因
HTTP Status 500 - type Exception report message description The server encountered an internal error ...
NYOJ：题目524 A-B Problem
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=860 My思路: 先用两个字符串储存这两个实数,然后再用另外两个字符串储存去掉符号和前后多 ...
spring mvc各种常见类型参数绑定方式以及json字符串绑定对象
在使用spring mvc作为框架的时候,为了规范,我们通常希望客户端的请求参数符合规范直接通过DTO的方式从客户端提交到服务端,以便保持规范的一致性,除了很简单的情况使用RequestParam映射 ...

Jquery DataTables相关示例

Jquery DataTables相关示例的更多相关文章

随机推荐

热门专题