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:是否启用排序功能
其它一些网站: