datatables自定义

来源：互联网发布：淘宝网络科技有限公司编辑：程序博客网时间：2024/05/20 18:52

最近对datatables又做了一次深入的了解，这次主要datatables自定义样式及搜索框，废话不多说了，直接上代码。首先介绍下，代码是基于jquery、bootstrap，如果要直接使用代码，请先引入相关js、css。

第一部分：自定义搜索框

<div class="row" style="margin-top: 20px;"><div class="col-lg-6" style="padding-left: 18px;"><div class="input-group" style="width: 100%;margin:0 auto;"><input type="text" id="assets" class="form-control" placeholder="请输入关键字搜索"><span class="input-group-btn"><button class="btn btn-default" type="button" id="search_button" onclick="doSearch();"><span class="glyphicon glyphicon-search"></span></button></span></div></div></div>

第二部分：初始化datatables的配置

$.dataTablesSettings = {      "bPaginate" : true,      "bInfo": true,      "bSort": false,      "sPaginationType": "full_numbers",      "iDisplayLength": 10,//每页显示的条数      "bLengthChange": false,//是否可以动态调整每页的显示条数      "bSearchable":false,      "bFilter":false,      "bProcessing": true,      "bServerSide":true,      "bAutoWidth": false,      "oSearch":{ "sSearch": "", "bRegex": false, "bSmart": true },      "oLanguage" : {          "sProcessing": "正在查询中......",          "sLengthMenu" : "每页显示 _MENU_ 条记录",          "sZeroRecords" : "对不起，查询不到相关数据！",          "sEmptyTable" : "<strong>非常抱歉，没有查到您需要的信息 ",          "sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",          "sInfoFiltered" : "数据表中共为 _MAX_ 条记录",          "sInfoEmpty" : "显示0到0条记录",          "oPaginate" : {            "sFirst" : "首页",            "sPrevious" : "上一页",            "sNext" : "下一页",            "sLast" : "末页"          }      },      "sServerMethod": "POST",        "sAjaxSource" : "<%=request.getContextPath()%>/trunkgroup/query",      "fnServerParams": function (aoData) {          //查询参数       },      "aoColumns": [       { "mData": "id","className":"text-center","sClass":"hidden"},        { "mData": "billId","className":"text-center","sClass":"hidden"},       { "mData": "trunkGroupName","className":"text-center"},         { "mData": "operatorInfo","className":"text-center"},       { "mData": "lineType","className":"text-center"},       { "mData": "capacity","className":"text-center"},       { "mData": "billName","className":"text-center",         "render":function(data,type,obj){            if(data != null){              return "<a style='color: #333;' href='<%=request.getContextPath() %>/bill/get/"+obj.billId+"'>"+obj.billName+"</a>";            }          }       },       { "mData":"application","className":"text-center"},       { "mData":"status","className":"text-center"},       { "mData": "purview","className":"text-center"},       { "mData": "remark","className":"text-center"},       { "mData": null,"className":"text-center",            "render": function(obj) {                return  "<div class='row'>"+                      "<div class='col-lg-5 text-center'>"+                      "<button id='editButton' type='button' class='btn btn-xs operateButton'>编辑</button>"+                      "</div>"+                      "<div class='col-lg-5 text-center'>"+                      "<button id='deleteButton' type='button' class='btn btn-xs operateButton'>删除</button>"+                      "</div>"+                      "</div>";            },        },      ],       "fnDrawCallback": function () {//表格每次重绘回调函数      }  }

第三部分：渲染datatables

  dataTable = $("#trunkGroup_table").dataTable($.dataTablesSettings);

还是稍微把html的代码贴下吧

            <table id="trunkGroup_table" class="table table-bordered table-striped display" style="table-layout:fixed">                <thead>                  <th style="width:7%;padding-left: 0px;padding-right: 0px;"class="text-center"nowrap="nowrap" >中继组</th>                      <th style="width:7.5%;padding-left: 0px;padding-right: 0px;" class="text-center"  nowrap="nowrap">运营商</th>                  <th style="width:7%;padding-left: 0px;padding-right: 0px;" class="text-center"  nowrap="nowrap">线路类型</th>                  <th style="width:7%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">容量</th>                  <th style="width:15%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">账单名称</th>                  <th style="width:12%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">用途描述</th>                  <th style="width:7%;padding-left: 0px;padding-right: 0px;" class="text-center"  nowrap="nowrap">状态</th>                                         <th style="width:6%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">权限</th>                  <th style="width:12.5%;padding-left: 0px;padding-right: 0px;" class="text-center"nowrap="nowrap">备注</th>                  <th style="width:10%;padding-left: 0px;padding-right: 0px;" class="text-center"  nowrap="nowrap">操作</th>                                                              </tr>              </thead>              <tbody>              </tbody>            </table>

这样datatables的初始化工作算是完成了，接下来我们看看自定义搜索吧

第四部分：自定义搜索

  function doSearch(params){      var assetSearch = $("#assets").val();//获取搜索框的值      //这里重新设置参数      $.dataTablesSettings.fnServerParams = function (aoData) {          aoData._rand = Math.random();          aoData.push({"name":"keyWords","value":assetSearch});                }      //搜索就是设置参数，然后销毁datatable重新再建一个      dataTable.fnDestroy(false);      dataTable = $("#trunkGroup_table").dataTable($.dataTablesSettings);      //搜索后跳转到第一页      dataTable.fnPageChange(0);  }

既然都说到这了，我就再多啰嗦两句，datatables自带的分页都是假分页，如果数据量大的话，页面直接卡死，所以建议根据实际情况选择真分页还是假分页。

第五部分：datatables真分页

            /**             * 当前页             */            Integer currentPage = 1;            /**             * 每页数             */            Integer pageSize = 10;            String iDisplayStart = request.getParameter("iDisplayStart");            String iDisplayLength = request.getParameter("iDisplayLength");            if (StringUtilsExtends.isNotBlank(iDisplayLength)) {                pageSize = Integer.valueOf(iDisplayLength);            }            if (StringUtilsExtends.isNotBlank(iDisplayStart)) {                currentPage = (Integer.valueOf(iDisplayStart) / pageSize) + 1;            }

注意：如果你获取不到iDisplayStart、iDisplayLength的值，请确认datatables的配置bPaginate是否为true。只有bPaginate为true时才能获取到值。

阅读全文

0 0