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> & ...

随机推荐

CSS3魔法堂：背景渐变（Gradient）
一.前言很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变 1. 线性渐变示例——七彩虹 ...
iOS实现书架布局样式【一些电子书的首页】
本文实现了类似电子书首页,用来展示图书或小说的布局页面,书架列表[iPhone6模拟器],屏幕尺寸还没进行适配,只是做个简单的demo[纯代码实现方式] 实现采用的是UICollectionView和 ...
Device eth0 does not seem to be present,delaying initialization解决方法
Bringing up interface eth0: Device eth0 does not seem to be present, delaying initialization. 在linu ...
[Solution] NPOI操作Excel
NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目.使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 ...
Linux - Ubuntu下JDK配置
系统版本: ubuntu 14.04 x64JDK版本: jdk-8u60-linux-x64 1.查看系统位数,输入以下命令即可 getconf LONG_BIT 2.下载对应的JDK文件,我这里下 ...
Azure开发者任务之三：理解Azure应用程序（上）
作为Windows Azure的托管服务被设计和开发的应用程序由这两部分组成: 1,托管代码 2,XML配置文件托管代码对应不同的角色 XML文件对应不同的配置设置我们可以看一下下面这张图,它详细 ...
js限制input输入
1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true <input type="submit" value=" ...
LCA算法倍增算法（洛谷3379模板题）
倍增(爬树)算法,刚刚学习的算法.对每一个点的父节点,就记录他的2k的父亲. 题目为http://www.luogu.org/problem/show?pid=3379 第一步先记录每一个节点的深度用 ...
字典集合Dictionary<K,V>和构造的应用==>>体检套餐项目
效果首先,我们先来准备我们需要的类 1.检查项目类 using System; using System.Collections.Generic; using System.Linq; using ...
常用Keytool 命令
常用Keytool 命令Keytool 是一个JAVA环境下的安全钥匙与证书的管理工具.它管理一个存储了私有钥匙和验证相应公共钥匙的与它们相关联的X.509 证书链的keystore(相当一个数据库, ...

Jquery DataTables相关示例

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

随机推荐

热门专题