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

随机推荐

四、Handler(WSGIHandler)
1.1 类视图关系 Handler主要负责处理HTTP请求,并生成相应的相应,process_request,process_response是两个最主要的成员.下图是WSGIHandle ...
微软modern.IE网站，多版本IE免费测试工具集
微软今天发布了modern.IE,这是一系列免费的.针对Web 开发者的测试工具和资源集合网站,微软希望以此来帮助开发者更轻松地实现跨 IE 和其他现代浏览器.跨设备的兼容性,其他还有代码检测工具.标 ...
Python入门笔记(14):Python的字符编码
一.字符编码中ASCII.Unicode和UTF-8的区别点击阅读:http://www.cnblogs.com/kingstarspe/p/ASCII.html 再推荐一篇相关博文:http:// ...
.NET中Debug模式与Release模式
Visual Studio 项目对程序的发布和调试版本分别有单独的配置.顾名思义,生成调试版本的目的是用于调试,而生成发布版本的目的是用于版本的最终分发. 如果在 Visual Studio 中创建程 ...
[moka同学笔记]yii2 activeForm 表单样式的修改
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAv4AAANcCAIAAACopDy/AAAgAElEQVR4nOzdfXAb52H4ef1veSatRV
mysql内存消耗分析
最近有些生产服务器老是mysql内存不停得往上涨,开发人员和维护反馈,用了不少的临时表,问题时常线上发生,测试又一直比较难重现. 经观察mysql内存的os占用趋势,发现从8:40开始,mysql内存 ...
(七)play之yabe项目【CRUD】
(七)play之yabe项目[CRUD] 博客分类: 框架@play framework 增加CRUD功能使用CRUD能干嘛?----> 在页面对模型进行增删改查操作,这样有什么实际意义 ...
nodejs连接mysql并进行简单的增删查改
最近在入门nodejs,正好学习到了如何使用nodejs进行数据库的连接,觉得比较重要,便写一下随笔,简单地记录一下使用在安装好node之后,我们可以使用npm命令,在项目的根目录,安装nodejs ...
Web安全开发注意事项
1.sql注入:这个很常规了,不要拼字符串以及过滤关键字都可以防住,需要注意的是,Cookie提交的参数也是可以导致注入漏洞的.2.旁注:就是说在保证自己的程序没问题的同时,也要保证同台服务器的其他 ...
R语言学习笔记：简单的回归分析
fitbit <- read.csv("fitbit.csv") date cal step dist floor sit inactive walk run2 ...

Jquery DataTables相关示例

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

随机推荐

热门专题