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

随机推荐

Linux内核分析课程笔记（一）
linux内核分析课程笔记(一) 冯诺依曼体系结构冯诺依曼体系结构实际上就是存储程序计算机. 从两个层面来讲: 从硬件的角度来看,冯诺依曼体系结构逻辑上可以抽象成CPU和内存,通过总线相连.CPU上 ...
C#函数式程序设计之局部套用与部分应用
函数式设计的核心与函数的应用以及函数如何作为算法的基本模块有关.利用局部套用技术可以把所有函数看成是函数类的成员,这些函数只有一个形参,有了局部套用,才有部分应用.部分应用是使函数模块化成为可能的两个 ...
.NET 配置文件简单使用
当我们开发系统的时候要把一部分设置提取到外部的时候,那么就要用到.NET的配置文件了.比如我的框架中使用哪个IOC容器需要可以灵活的选择,那我就需要把IOC容器的设置提取到配置文件中去配置.实现有几种 ...
js验证电话号码的正则表达式
在做程序时遇到js验证电话号码的问题,使用正则表达式来操作很简单的.一起来看一下吧. 1,这种是比较简单的验证号码: 电话号码只能包含”(“.“)”.“-”和数字 <input type=t ...
【循序渐进学Python】13.基本的文件I/O
文件I/O是Python中最重要的技术之一,在Python中对文件进行I/O操作是非常简单的. 1. 打开文件使用 open 函数来打开文件,语法如下: open(name[, mode[, buf ...
在uwp中复活常用的vb库函数
这个博文是纯原创的,转载一定要说明作者是 Nukepayload2!! 在.Net Core 中,很多地方被精简了,有个重灾区就是vb语言库.从当初的囊括vb6库函数并且附带后期绑定到现在的几个函数加 ...
关于下载DynamicDataDisplay.dll后被默认锁定的问题
问题:命名空间 d3:“http://research.microsoft.com/DynamicDataDisplay/1.0”不存在ChartPlotter元素原因:下载DynamicDataD ...
isEmpty与null、""的区别
前一段时间我阅读别人的代码,发现有的时候用isEmpty,有的时候用null,有的时候用"".我很困惑三者之间的区别,于是我就自己写了一个程序来验证一下 public class ...
[python学习笔记]Day1
初识python 第一个python程序: print('Hello,Python') >>>Hello,Python python2与python3的一些主要的区别: 1.在pyt ...
Ahjesus Nodejs02 使用集成开发环境
下载最新版webstorm, 选择此集成开发环境是因为支持性较好,在vs下也有插件支持,不过感觉有些牵强附vs插件 NTVS 详细介绍安装好以后就需要配置npm NPM 国内高速镜像 source ...

Jquery DataTables相关示例

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

随机推荐

热门专题