JSP 代码:
<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>
js代码:
$(document).ready(function() { var config_ext = { "aaSorting":[[0, "asc"]], "bAutoWidth": false, "bServerSide": true, "sAjaxSource": "${ctx}/plans?action=ajax", "sServerMethod": "POST", "bPaginate": true, "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); });
java代码:
String sStart = request.getParameter("iDisplayStart"); String sEcho = request.getParameter("sEcho"); String sAmount = request.getParameter("iDisplayLength"); //查询总的记录条数 int total = manager.getPlansTotal(); //分页查询 int pageNow =0; if(Integer.parseInt(sStart) == 0){ pageNow = 1; } pageNow = Integer.parseInt(sStart); int pageSize = Integer.parseInt(sAmount); List<Plan> planlist = manager.queryPlansByPage(pageNow,pageSize); Map<String, Object> result = new HashMap<String, Object>(); result.put("iTotalRecords", total); result.put("iTotalDisplayRecords", sAmount); result.put("aaData", planlist); String json = com.alibaba.fastjson.JSON.toJSONString(result); PrintWriter out = response.getWriter(); //传到页面 out.write(json); out.flush(); out.close();
其它一些属性:
分页
bPaginite:true;是否启用分页功能
sPaginationType:two_button 或者full_numbers 分页风格
sFirst:告诉他第一页怎么写
sLast:告诉他最后一页怎么写
sNext:告诉他下一页怎么写
sPrevious:告诉他上一页怎么写
语言
"sInfo":"共_TOTAL_页 第_START_到_END_页",
"sEmptyTable":"没有数据"
"sInfoFiltered":"从_MAX_条记录中搜索",
"sInfoPostFix": " 底边栏的静态信息",
"sInfoThousands": "我靠",//格式化信息用的
"sLengthMenu":"显示<select><option>20</option><option>40</option></select>条信息"
"sSearch":"搜索"
基本的命令
aaSorting:参数是个数组 [[],[]]单独定义每一列的排序方式
aaSortingFixed:锁定某一列的排序方式 用户不能改变
iDisplayLength:规定每一页的显示数目
aLengthMenu:[[两个数组要一样],[真正显示的是这个数组中的内容 最后一个是”all”]]
bAutoWidth:自动调整列宽
bDestroy:好比重新部署
bFilter:是否启用过滤器
bInfo:是否启用底边信息栏
bLengthChange:就是是否启用上面那个可以方便显示几页的下拉框
bProcessing:表格在处理数据时是否要显示信息
sProcessing:定义表格在处理数据时要显示的信息
bScrollAutoCss:是否允许显示滚动条
sScrollY:表格的高度 不够的话用滚动条
bScrollCollapse:当设置sScrolly时 如果数据没那么高 表格是否自适应高度
bScrollInfinite:允许无限滚动 和google的图片搜索功能一样 一滚到最后就自动刷新
sScrollXInner:是个百分比 实际就是表格的宽度一样
sScrollX:也是百分比 实际就是水平方向滚动条件
bSort:是否启用排序功能
其它一些网站:
http://blog.csdn.net/mickey_miki/article/details/8240477
相关推荐
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!
分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!,希望对大家有用。
分页DATATABLE 适合整合STRUTS2
trello2datatables 以jQuery Datatable的形式显示trello板的所有可见卡 例子 这个例子现在不见了。 去做: 添加模式以显示卡片内容,而不是外部链接到trello 排序时尊重列表位置
JQueryDataTable-Servlet 基本信息 这是我用来学习Dropwizrd框架的一个小示例应用程序。 它还可以作为项目快速启动和运行。 跑步 现在您可以使用以下命令运行应用程序: mvn clean package -Dmaven.test.skip=true ...
代码如下:/// /// 将DataTable中的数据导出到指定的Excel文件中 /// /// Web页面对象 /// 包含被导出数据的DataTable对象 /// Excel文件的名称public static void Export(System.Web.UI.Page page,System.Data....
数据表-树表 它将与结合在一起,然后实现了具有DataTables和jQuery树形表功能的Tree显示。
处理通用功能jQuery Datatable,例如对单列或多列进行排序,限制,全局搜索和单个搜索 支持自动特殊过滤器(除常见的jQuery Datatable参数外的参数)。 在单独的过滤器参数上支持数组值 支持RegExr过滤 :guitar: ...
例子 文件夹example有一些示例,用于不同的用例: 通过Javascript填充和维护的数据表(无AJAX,无数据库),数据按行组织; 通过Javascript(无AJAX,无数据库)填充和维护的数据表,其中数据以对象的形式组织; ...
使用DataTable默认的ajax交互功能,对传给后台和从后台获取的数据都有命名格式要求,这样一来耦合度较高,不利于后期扩展,不能直接适用于需要跟多种不同前端或其他业务交互的项目。本例子主要展示了自行封装请求...
* 实用方法简单讲解,下面以TSQLServer.cs类为例子: 1.我们最常用的方式就是增删改查,在使用时简单方面,例如我们需要做修改一行记录需要返回DataRow一行记录 需要调用方法调用如下: public static DataRow ...
序列化帮助类,还有例子 SerializeHelper 序列化帮助类,Xml序列化,Json序列化,SoapFormatter序列化,BinaryFormatter序列化 27.压缩解压缩 SharpZip 28.验证码 YZMHelper Captcha 验证码类,一个很个性的验证码...
使用DataTable默认的ajax交互功能,对传给后台和从后台获取的数据都有命名格式要求,这样一来耦合度较高,不利于后期扩展,不能直接适用于需要跟多种不同前端或其他业务交互的项目。本例子主要展示了自行封装请求...
序列化帮助类,还有例子 SerializeHelper 序列化帮助类,Xml序列化,Json序列化,SoapFormatter序列化,BinaryFormatter序列化 27.压缩解压缩 SharpZip 28.验证码 YZMHelper Captcha 验证码类,一个很个性的...
1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...
1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高...