优点:开源(选型最重要的一点),API方法扩展比较简单,源码写的非常优美,以至于比较难看懂,需要不断调试。
缺点:功能与datagrid或者ligerui的grid等比较起来缺少很多,不过这些都可以自己扩展,需要费比较大的精力。
下面是我的一个小小案例,里面有些方法是我自己额外加的,大家可以自行删除掉,不然会报错。 本人不太喜欢通过for循环去展现表单,一切都是ajax,劲量减少html的编写,不然项目参与人多了后代码就会非常乱。JavaScript可以封装,尽量让开发人员少些代码。
DatatableHelper这个封装已经在之前的博客上贡献出来了。
关于columns中的多余属性:dataType: "dict", dataTypeValue: 'common.is'是传递到后台进行数据转换的,需要自己改一下源码,让后台把值转换好后传回前端展现。
比如日期格式的换砖,bool值的转换,i18n的转换和数据字典的转换。
var TableDatatablesAjax = function () {
var grid;
var handleRecords = function () {
grid = new DatatableHelper();
var gridSize = Public.setGrid();
grid.init({
src: $("#datatable_ajax"),
onSuccess: function (grid, response) {
},
onError: function (grid) {
},
onDataLoad: function(grid) {
TableDatatablesAjax.getDatatableHelper().getDataTable().row(':eq(0)').select();
},
loadingMessage: 'Loading...',
dataTable: {
"scrollY": gridSize.h - 55,
"scrollX": true,
dom: 'Bfrtip',
columns: [{
data: "id",
title: "编号",
width: 40,
fixed: true,
align: "center"
},{
data: "username",
title: "登陆账号",
width: 100,
align: "left"
},{
data: "name",
title: "姓名",
defaultContent: "",
width: 80,
align: "left"
},{
data: "email",
title: "邮箱",
defaultContent: "",
width: 120,
align: "left"
},{
data: "mobilePhoneNumber",
title: "手机号",
defaultContent: "",
width: 120,
align: "left"
},{
data: "createDate",
title: "创建时间",
defaultContent: "",
width: 120,
align: "left",
dataType: 'format', dataTypeValue:'yyyy-MM-dd'
},{
data: "status",
title: "账户状态",
width: 120,
align: "left",
dataType: "i18n",
dataTypeValue: "UserStatus"
},{
data: "admin",
title: "管理员",
width: 80,
align: "left",
dataType: "dict",
dataTypeValue: 'common.is'
}],
"bStateSave": true,
"ajax": {
"url": location.href,
},
buttons: [
'selectAll',
'selectNone'
],
"order": [
[1, "asc"]
]
}
});
// handle group actionsubmit button click
grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
e.preventDefault();
var action = $(".table-group-action-input", grid.getTableWrapper());
if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
grid.setAjaxParam("customActionType", "group_action");
grid.setAjaxParam("customActionName", action.val());
grid.setAjaxParam("id", grid.getSelectedRows());
grid.getDataTable().ajax.reload();
grid.clearAjaxParams();
} else if (action.val() == "") {
App.alert({
type: 'danger',
icon: 'warning',
message: 'Please select an action',
container: grid.getTableWrapper(),
place: 'prepend'
});
} else if (grid.getSelectedRowsCount() === 0) {
App.alert({
type: 'danger',
icon: 'warning',
message: 'No record selected',
container: grid.getTableWrapper(),
place: 'prepend'
});
}
});
//grid.setAjaxParam("customActionType", "group_action");
//grid.getDataTable().ajax.reload();
//grid.clearAjaxParams();
}
return {
init: function () {
handleRecords();
},
getDatatableHelper: function(){
return grid;
}
};
}();
jQuery(document).ready(function() {
TableDatatablesAjax.init();
SetUI();
});
HTML代码
<div class="table-container">
<table class="table table-striped table-bordered table-hover table-checkable dataTable no-footer" id="datatable_ajax">
</table>
</div>
截图:
- 大小: 42.3 KB
分享到:
相关推荐
工作需要用到jquery dataTables。 网上找不到这样的例子,只好我自已整理一份了。 该demo包含8个可以运行的最简单的个例子。 希望能对大家有帮助。
datatables 插件
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...
用于dataTables 使用dataTables添加行辅助按钮如 修改/删除.
ssm整合datatables实例Demo,springMVC spring mybatis datatables
jquery datatables离线参考
jquery.datatables,异步请求后台数据时,调用api动态合并行。
bootstrap dataTables使用方法 datatables常用API 文档整理很方便
解决datatables出现FixedHeader 2 is not supported with DataTables' scrolling mode at this time的问题
开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables....
DataTables examples This DataTables package comes with a number of examples of how you can use this software, and demonstrates it's capabilities and flexibility.
DataTables导出CVS Excel PDF 打印
一个简单的datatables模板而已....
DataTables官方源码
Laravel开发-datatables Laravel4的数据表jquery插件的服务器端处理程序
赠送jar包:datatables-1.9.4.jar; 赠送原API文档:datatables-1.9.4-javadoc.jar; 赠送Maven依赖信息文件:datatables-1.9.4.pom; 包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)版.zip; ...
java做的一个dataTables分组案例,样式可以根据自己需求修改
此例子为参加 Datatables中文网第一期交流学习活动 网友 付裕 提供的Demo 一个比较柔和的绿色风格,并且支持列宽拖动,选择行即可勾选checkbox,操作上比较方便