看产品里数据显示用了dataTable,自己写了一小段测试了一下
JS:
$(document).ready(function() { var config_ext = { "aaSorting":[[0, "asc"]], "bAutoWidth": false, "bServerSide": true, "sAjaxSource": "${ctx}/plans?action=ajax", "sServerMethod": "POST", "fnServerParams": function ( aoData ) { //aoData.push( { "name": "companyInfo.companyName", "value": $("#searchCompanyName").val() } ); //aoData.push( { "name": "companyInfo.certiCode", "value": $("#searchCertiCode").val() } ); }, "fnDrawCallback": function( oSettings ) { $("#datatable td a").css("margin-left", "12px"); }, "aoColumns": [ { "mDataProp": "planName"}, { "mDataProp": "ownerName"}, { "mDataProp": "startTime"}, { "mDataProp": "endTime"}, { "mDataProp": "executeTime"}, { "mDataProp": "planId","fnRender": function(obj) { var str = ""; if(obj && obj.aData && obj.aData.planId){ var planId = obj.aData.planId; str = "<a href='${ctx}/planDetails?planId="+planId+"'>" +"<i class='splashy-documents_edit'></i>详细信息" +"</a>" } return str; }, "bSortable": false} ] }; var table_config = jQuery.extend({}, def_dt_config, config_ext); var dt = $('#datatable').dataTable(table_config); $('#search').live("click",function(){ var oSettings = dt.fnSettings(); dt.fnDraw(); }); });
html:
<table id="datatable" class="table table-bordered table-striped"> <thead> <tr> <th>计划名称</th> <th>计划执行者</th> <th>计划开始时间</th> <th>计划结束时间</th> <th>运行总时间</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table>
servlet:
String sStart = request.getParameter("iDisplayStart"); String sAmount = request.getParameter("iDisplayLength"); List<Plan> list = new ArrayList<Plan>(); list.add(new Plan("plan1","test1", "lidao")); Map<String, Object> result = new HashMap<String, Object>(); result.put("iTotalRecords", 12); result.put("iTotalDisplayRecords", 10); result.put("aaData", list); String json = com.alibaba.fastjson.JSON.toJSONString(result); PrintWriter out = response.getWriter(); out.write(json); out.flush(); out.close();
相关推荐
### JQuery DataTable API中文文档知识点概览 #### 一、简介 JQuery DataTable 是一个高度灵活且功能丰富的插件,能够将HTML表格转换成具有高级交互性的动态表格。它支持复杂的数据排序、搜索、分页等功能,并能很...
在本文中,我们将深入探讨如何使用Jquery dataTable插件来显示指定列,特别是在处理隐藏列的情况下。`Jquery dataTable` 是一个强大且功能丰富的JavaScript库,用于处理HTML表格,提供了排序、过滤、分页等特性,极...
在本文中,我们将深入探讨jQuery DataTable插件,它是一个强大的数据展示工具,广泛用于Web开发中的表格操作。标题“Jquery dataTable完整例子(取数据、分页、样式等)”和描述表明,我们将讨论如何利用这个插件...
jQuery Datatable 自定义列1 jQuery Datatable 是一个功能强大的表格工具,提供了许多实用的功能,例如排序、分页、查找等。在本文中,我们将重点讲解如何对 Datatable 中的表格内容进行操作,包括改变样式、增加一...
**jQuery DataTables 后台获取数据详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转换为具有高级功能的数据展示工具,如分页、排序、搜索等。结合Struts、Spring和Ibatis框架,我们可以...
jquery datatable api chm 中文
初始化`DataTable`时,可以设置一系列参数来定制其行为,如`columnDefs`用于定义列的样式和行为,`ordering`控制列的排序,`searching`定义是否启用全局搜索,`paging`控制分页功能等。 **3. 表格操作(Table ...
在IT领域,jQuery DataTables是一款广泛使用的数据展示插件,它提供了丰富的功能,如排序、搜索、分页等。在某些场景下,我们可能需要对表格中的单元格进行合并,以便更好地展示数据,例如汇总或者分类。本篇将详细...
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!
在.Net下使用Jquery DataTable,首先需要确保在项目中引入了jQuery库以及DataTable的JavaScript和CSS资源。可以通过NuGet包管理器安装jQuery,然后从CDN或本地资源路径引入DataTable的库文件,例如: ```html ...
**jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转化为交互式数据视图。服务器端分页(Server-side pagination)是其核心特性之一,尤其适用于处理大量...
### jQuery DataTable大数据分页解决方案详解 #### 一、概述 在处理大数据时,尤其是在Web应用中展示大量数据,如何高效地进行数据分页是一项重要的技术挑战。jQuery DataTable插件因其强大的功能和灵活性,在Web...
2. **JSON数据格式化**:由于JQuery Datatable通常使用JSON数据格式来获取服务器端数据,Action需要将处理后的数据转换为JSON格式,可以通过使用Struts 2的JSON插件或自定义Result类型来实现。 3. **Ajax请求设置**...
Jquery DataTable是一个很不错的表格插件。 1、功能强大,支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源; 4、众多使用者的实例代码
Jquery Datatable editor,功能很强大,使用的人可能不多,但真的好用。目前新版(1.5.6)已经是加密版本,没有破解,就退而示其次,使用这个版本。 如果发现有问题,就在dataTables.editor.min.js文件把 var K4O={'...
$('#example').DataTable({ data: [ // 数据数组 ], columns: [ { title: "Name" }, { title: "Position" }, { title: "Office" }, { title: "Age" }, { title: "Start date" }, { title: "Salary" } ] ...
### Jquery DataTable Bootstrap Based Admin Template - Material Design #### 概述 Jquery DataTable Bootstrap Based Admin Template - Material Design 是一个基于 Jquery 和 Bootstrap 的管理界面模板,该模板...
**jQuery DataTables 全面解析** `jQuery DataTables` 是一个功能强大的JavaScript库,用于将HTML表格转换为高度交互的数据展示工具。它提供了丰富的功能,包括数据检索、排序、过滤、分页和自定义样式,使得网页上...
这里我们将详细讲解如何使用jQuery DataTable实现后台动态分页。 首先,确保在HTML文件中引入了必要的CSS和JavaScript库,如jQuery核心库、DataTables库以及Bootstrap样式库(如果需要的话)。在提供的代码中,可以...
**jQuery DataTables插件V2.0详解** jQuery DataTables是一款功能强大的JavaScript表格插件,它为HTML表格提供了丰富的交互式功能,如排序、搜索、分页和自定义数据处理等。在V2.0版本中,这个插件进一步提升了性能...