FoxBPM任务中心目前用到JQuery DataTable控件的页面包括：用户列表、待办任务、已办任务、流程追踪，根据这四个页面整理出的功能需求如下：
1、服务器端分页
相对于服务器端分页，还可以采用浏览器缓存数据进行客户端分页，由于客户端分页是系统初始化时数据一次性加载，所以当数据量很大时页面加载会遇到瓶颈。采用服务器端分页就可以避免这样的问题，页面初始化只需要加载每页数据，进行分页操作时，根据分页信息重新请求服务器加载数据。
2、展示的列可以动态的选择
该功能可以使得系统对用户更加友好，不同用户可以选择性的查看数据，是一个很实用的页面功能。
3、动态展示分页信息
为用户提供更加直观的分页信息 ，页面展示为 “当前显示 1 到 1 条，共 1 条记录”。
4、动态定制检索条件
JQuery DataTable默认的检索控件是很难满足不同的业务场景的，由于JQuery DataTable默认的检索控件支持手工设置、动态渲染，所以我们可以借助它的渲染机制动态绑定自己的控件，然后在通过自定义函数和DataTable API实现检索功能。
5、相关列的动态排序
根据用户的不同需求实现不同列的正反排序，支持正反排序的动态切换。
6、所有表格控件支持中文标题
JQuery DataTable控件默认标题是英文的，统一改成中文。
7、表格控件的布局
控件的默认布局是固定的，根据用户通常的操作习惯修改布局。目前是 表格左上是“检索”控件， 右上 是“展示列”按钮，左下动态展示分页信息，右下 是“分页”控件。
8、列的宽度进行自适应展示
由于每行每列的内容已经内容宽度都不是固定的，不同的用户对应客户端分辨率也不同，所以内容不确定的列支持自适应。
9、通过回调函数对页面元素手工修改
整个表格都是由BootStrap框架生成的，在整体结构不变的情况下，可以通过回调函数对页面元素的式样进行微调。
BootStrap 实例html如下所示：
<section id="widget-grid" class="">
<div class="row">
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-1" data-widget-editbutton="false">
<header>
<span class="widget-icon"> <i class="fa fa-table"></i> </span>
<h2>待办任务</h2>
</header>
<div>
<div class="jarviswidget-editbox">
</div>
<div class="widget-body no-padding">
<table id="datatable_fixed_column" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>任务</th>
<th>优先级</th>
<th>发起人</th>
<th>状态</th>
<th>创建</th>
<th>期限</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</article>
</div>
</section>
<!-- end widget grid -->
<script src="../portal/jsportal/todotasks.js"></script>
<script src="../portal/js/foxbpm/common.js"></script>
<script type="text/javascript">
pageSetUp();
// load related plugins
loadScript("../js/plugin/datatables/jquery.dataTables.min.js", function(){
loadScript("../js/plugin/datatables/dataTables.colVis.min.js", function(){
loadScript("../js/plugin/datatables/dataTables.tableTools.min.js", function(){
loadScript("../js/plugin/datatables/dataTables.bootstrap.min.js", function(){
loadScript("../js/plugin/datatable-responsive/datatables.responsive.min.js", pagefunction)
});
});
});
});
</script>
解析：
1、以上HTML 由BootStrap提供，可以添加代码，但是不建议修改。
2、loadScript函数第一个参数是需要加载的js文件相对路径，第二个参数是回调函数。其功能是加载js文件定义到前端客户端内存中，如上所示加载的js文件都是由BootStrap提供的Data Tablek控件必须的JS文件。
3、pagefunction函数是整个表格加载的核心函数，在todotasks.js文件中定义，详细代码如下所示：
var table= $('#datatable_col_reorder')
.DataTable(
{
columns : [
{
data : 'initiator'
},
{
data : 'subject'
},
{
data : 'startTime'
},
{
data : 'updateTime'
},
{
"orderable" : false,
"data" : 'instanceStatus',
"defaultContent" : "-"
},
{
data : 'initatorName'
},
{
"orderable" : false,
"data" : 'processLocation',
"defaultContent" : "-"
},
{
"orderable" : false,
"data" : null,
"width":"15%",
"defaultContent" : ""//"<a href='javascript:void(0);' class='btn btn-danger'>查看</a> "
} ],
columnDefs : [
{
"targets" : [ 0 ],
"orderable" : false,
"width":20,
"createdCell" : function(td, cellData,
rowData, row, col) {
$(td).html("<img width='20' height='20' class='online' src='/foxbpm-webapps-common/service/identity/users/"+cellData+"/picture'/>");
}
},
{
"targets" : [ 1 ],
"createdCell" : function(td, cellData,
rowData, row, col) {
//任务主题避免这行
if(cellData.length>24){
$(td).html(cellData.substring(0,20)+"<b> . . .</b>");
}else{
$(td).html(cellData);
}
}
},
{
"targets" : [ 4 ],
"orderable" : true,
"createdCell" : function(td, cellData,
rowData, row, col) {
if (rowData.endTime == null) {
$(td)
.html(
"<span class='label label-default'>激活</span>");
if (rowData.isSuspended == 'true') {
$(td)
.html(
"<span class='label label-default'>暂停</span>");
}
if (rowData.assignee == null) {
$(td)
.html(
"<span class='label label-default'>未领取</span>");
}
} else {
$(td)
.html(
"<span class='label label-default'>完成</span>");
}
}
} ,
{
"targets" : [ 7 ],
"orderable" : true,
"createdCell" : function(td, cellData,
rowData, row, col) {
var tdHtml = "<a class='btn btn-default btn-xs' href='javascript:void(0);' onclick=viewForm('"+rowData.formUriView+"','"+rowData.id+"','"+rowData.bizKey+"');><i class='fa fa-pencil-square-o'></i> 查看</a>"+
" <a class='btn btn-default btn-xs' href='javascript:void(0);' onclick=showDiagram('"+rowData.processDefinitionKey+"','"+rowData.id+"');><i class='fa fa-sitemap'></i> 流程图</a>";
$(td).html(tdHtml);
}
}],
"processing" : true,
"orderable" : true,
"serverSide" : true,
"ajax" : _serviceProcessInstanceUrl,
"sDom" : "<'dt-toolbar'<'col-sm-6 col-xs-12 hidden-xs'f><'col-sm-6 col-xs-12 hidden-xs'>C>"
+ "t"
+ "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p l>>",
"autoWidth" : true,
"colVis" : {
"buttonText" : "展 示 列",
"restore" : "恢复默认展示",
"showAll" : "展示所有列",
"showNone" : "不展示列"
},
"oLanguage" : {
"sProcessing" : "正在加载中......",
"sZeroRecords" : "对不起，查询不到相关数据！",
"sEmptyTable" : "表中无数据存在！",
"sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
"sSearch" : "搜索",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
},
"sSearch": "_INPUT_ "+
"<select id='TASKSTATE_SEARCH' class='form-control'><option value='0'>未领取</option><option value='1'>领取</option><option value='2' selected>所有</option></select> " +
" <input placeholder='创建起始' id='createtime_start_dateselect_filter' type='text' class='form-control datepicker' data-dateformat='yy-mm-dd' style='width:15%'>" +
"<label for='createtime_start_dateselect_filter' class='glyphicon glyphicon-calendar no-margin padding-top-15' rel='tooltip' title='' style='left:-50%;top:-5px'></label>" +
" - " +
"<input placeholder='创建终止' id='createtime_end_dateselect_filter' type='text' value='' class='form-control datepicker' data-dateformat='yy-mm-dd' style='width:15%'>"+
"<label for='createtime_end_dateselect_filter' class='glyphicon glyphicon-calendar no-margin padding-top-15' rel='tooltip' title='' style='left:-32%;top:-5px'></label> " +
" <a class='btn btn-primary' style='height: 30px; disabled: true;' onclick='searchTodoTask();' href='javascript:void(0);'>搜索</a> <a class='btn btn-primary' style='height: 30px; disabled: true;' href='javascript:void(0);' onclick='clearCondition();'>重置</a></form>"
},
"bStateSave" : false,
"bAutoWidth" : true,
"sPaginationType" : 'full_numbers',
"drawCallback":function(){
//调整页面布局
$("#datatable_col_reorder_length").css("padding-right","10px");
$(".dt-toolbar").css("padding-bottom","6px");
$(".dt-toolbar").css("padding-right","64px");
$("#datatable_col_reorder_filter").css("width","900px");
$("[type='search']").attr("placeholder","主题/发起人");
pageSetUp();
}
});
pagefunction函数说明：通过DataTable函数创建一个表格 ：var todoTable = $('#datatable_fixed_column').DataTable({config}); datatable_fixed_column对于HTML中定义的table。得到的todoTable对象时JQuery DataTable对象，利用其ajax接口可以重新加载数据 如todoTable.ajax.url(baseUrl).load()。
创建DataTable重点配置如下：
1、“drawCallback”
drawCallback是 DataTable创建后的回调函数，目前页面创建后的式样微调都通过该函数进行。
2、“oLanguage”
该配置项负责表格控件的语言配置，目前页面的检索控件是通过该机制进行手工渲染。
3、“sDom”
负责表格控件的布局工作，其有独立的语法规则,如“f”表示检索控件、“C”表示选择列控件等。
4、“columns”
表示列定义，其定义的顺序必须和HTML 定义的 表头一致。
5、“columnDefs”
表示列规则定义，包括列的式样定义、列的数据内容定义。
6、“sSearch”
人工设置渲染检索控件。
7、“serverSide”
表示数据分页采用服务器端分页，只需要通过ajax设置服务器地址就可以。
JQuery DataTable 控件的API参考地址(包括所有操作的API和DEMO)：
http://datatables.net/reference/option/
Foxbpm任务中心的待办任务列表的最终实现如下图所示：
====================================================================
声明：本文首发iteye blog，转载请注明作者信息及原文地址，谢谢
作者信息：
马恩亮（elma@wisedu.com）
=====================================================================
相关推荐
**jQuery DataTables 后台获取数据详解** jQuery DataTables 是一款功能强大的JavaScript库，用于将HTML表格转换为具有高级功能的数据展示工具，如分页、排序、搜索等。结合Struts、Spring和Ibatis框架，我们可以...
### JQuery DataTable API中文文档知识点概览 #### 一、简介 JQuery DataTable 是一个高度灵活且功能丰富的插件，能够将HTML表格转换成具有高级交互性的动态表格。它支持复杂的数据排序、搜索、分页等功能，并能很...
在本文中，我们将深入探讨如何使用Jquery dataTable插件来显示指定列，特别是在处理隐藏列的情况下。`Jquery dataTable` 是一个强大且功能丰富的JavaScript库，用于处理HTML表格，提供了排序、过滤、分页等特性，极...
标题“Jquery dataTable完整例子（取数据、分页、样式等）”和描述表明，我们将讨论如何利用这个插件实现数据的获取、分页、排序和搜索功能，并且将看到一个具体的实例，帮助理解如何与JSON数据进行交互。...
**jQuery DataTables中文文档API详解** `jQuery DataTables` 是一个功能强大的JavaScript库，用于将HTML表格转换为高度可配置且交互式的数据展示工具。它提供了丰富的搜索、排序、过滤和分页功能，使得在网页上处理...
在IT领域，jQuery DataTables是一款广泛使用的数据展示插件，它提供了丰富的功能，如排序、搜索、分页等。在某些场景下，我们可能需要对表格中的单元格进行合并，以便更好地展示数据，例如汇总或者分类。本篇将详细...
jquery datatable api chm 中文
在本文中，我们直接使用一个数据文件作为数据源，而不通过后端代码实现数据传递。我们的数据源是一个对象数组，包含多个对象，每个对象都有多个属性，例如 name、position、salary 等。 在定义了数据源后，我们需要...
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换，一个详细完整的例子！
**基于jQuery的强大的表格插件 - dataTable** 在Web开发中，数据展示往往是一个重要的环节，尤其是在处理大量结构化数据时。jQuery的dataTable插件提供了一种高效、灵活且功能丰富的解决方案，使得网页上的表格操作...
Jquery DataTable是一个很不错的表格插件。 1、功能强大，支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源； 4、众多使用者的实例代码
jQuery DataTables 提供了丰富的插件和自定义选项，如列选择、导出数据、自定义列等，可结合服务器端分页实现更复杂的业务需求。 总结来说，jQuery DataTables 的服务器端分页是高效处理大数据的关键，它通过与...
jQuery DataTable插件因其强大的功能和灵活性，在Web开发中被广泛应用于表格数据的展示与管理。本文将详细介绍在使用jQuery DataTable处理大数据时，四种不同的数据来源及其对应的分页解决方案。 #### 二、数据来源...
DataTable+Jquery+Bootstrap实现表格增删改查 使用DataTable+Jquery+Bootstrap实现表格增删改查
总结来说，`jQuery DataTables` 是一个功能强大的前端数据展示工具，与`Struts2`框架结合使用，可以构建出高效的Web应用，提供动态、交互的数据展示和管理功能。无论是数据的获取、分页、排序、过滤，还是样式的定制...
在.Net环境下，开发者可以将Jquery DataTable与后端数据服务结合，实现动态加载和实时更新表格内容。 在.Net下使用Jquery DataTable，首先需要确保在项目中引入了jQuery库以及DataTable的JavaScript和CSS资源。可以...
V2.0中，对服务器端数据处理进行了优化，可以轻松实现Ajax数据加载。例如，通过`ajax`选项指定服务器接口： ```javascript $('#example').DataTable({ ajax: 'https://api.example.com/data', columns: [ { data...
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...
这个库基于jQuery框架，可以无缝地整合到现有的Web应用中，为用户带来交互式的表格体验。 首先，jQuery DataTables的核心特性包括： 1. **数据源支持**：DataTables支持多种数据源，如HTML表格数据、CSV、JSON、...
2. **JSON数据格式化**：由于JQuery Datatable通常使用JSON数据格式来获取服务器端数据，Action需要将处理后的数据转换为JSON格式，可以通过使用Struts 2的JSON插件或自定义Result类型来实现。 3. **Ajax请求设置**...