datatables 入门例子

http://datatables.club/blog/2016/01/28/user-share-nbh1991.html

 

html页面：

<div id="wrapper">

        <div >

            <div class="row">

                <div class="col-lg-12">

                    

                </div>

            </div>

            <div class="form-horizontal" >

           <div class="form-group">

 <label class="col-sm-1 control-label" >名称:</label>

 <div class="col-sm-2" data-column="1">

<input class="form-controlSearch" type="text" id="col1_filter" maxlength="30" placeholder="输入姓名搜索"/>

 </div>

 <label class="col-sm-1 control-label" >类型:</label>

 <div class="col-sm-2" data-column="3">

<select class="form-controlSearch" id="col3_filter">

       <option value="">请选择</option>

       </select>

 </div>

 <label class="col-sm-1 control-label">业务类型:</label>

 <div class="col-sm-2" data-column="4">

 <select class="form-controlSearch" id="col4_filter">

       <option value="">请选择</option>

       </select>

 </div>

 <label class="col-sm-1 control-label">签约人姓名:</label>

 <div class="col-sm-2" data-column="5">

 <input class="form-controlSearch" type="text" id="col5_filter" maxlength="30" placeholder="输入签约人姓名搜索">

   </div>

  </div>

  <div class="form-group">

 

 <label class="col-sm-1 control-label">公司名称:</label>

 <div class="col-sm-2" data-column="6">

 <input class="form-controlSearch" type="text" id="col6_filter" maxlength="40" placeholder="输入公司名称搜索">

   </div>

   <label class="col-sm-1 control-label" >法人姓名:</label>

 <div class="col-sm-2" data-column="7">

  <input type="text" class="form-controlSearch" id="col7_filter" maxlength="30" placeholder="输入法人姓名搜索"/>

 </div>

  </div>

  <div class="form-group">

  <label class="col-sm-1 control-label"></label>

 <div class="col-sm-2">

<%--  <input type="hidden" id="currentNodeCode" name="currentNodeCode" value="${currentNodeCode}"/> --%>

 </div>

 <label class="col-sm-1 control-label"></label>

 <div class="col-sm-2"></div>

 <label class="col-sm-1 control-label"></label>

 <div class="col-sm-2"></div>

 <label class="col-sm-1 control-label"></label>

<div class="col-sm-2">

<button class="btn btn-outline btn-info" style="margin-left:35px;" onclick="search()">搜索</button>

<button class="btn btn-outline btn-success" onclick="clearSearch('form-controlSearch')">重置</button>

</div>

  </div>

  </div>

  </div>

            <!-- /.row -->

            <div class="row">

                <div class="col-lg-12">

                    <div class="panel panel-default">

                         

                        <div class="panel-body">

                            <div class="dataTable_wrapper">

                                <table class="table table-striped table-bordered table-hover " id="allyTable">

                                    <thead>

                                        <tr>

   <th>序号</th>

   <th>名称</th>

           <th>上级</th>

           <th>类型</th>

           <th>业务类型</th>

           <th>签约人</th>

           <th>公司名称</th>

           <th>法人姓名</th>

           <th>操作人</th>

           <th>操作时间</th>

           <th>创建时间</th>

           <th>id</th>

                                        </tr>

                                    </thead>

                                    <tbody></tbody>

                                </table>

                            </div>

                        </div>

                        <!-- /.panel-body -->

                    </div>

                    <!-- /.panel -->

                </div>

                <!-- /.col-lg-12 -->

            </div>

            <!-- /.row -->

        </div>

        <!-- /#page-wrapper -->

 

js

$().ready(function() {

// 初始化列表

dataTablesInit(ally);

)}

var ally = {};

 

ally.property = {

version:"v1.0",

name:"ally",

tableId:"allyTable",

checkAllId:"allyCheckAll",

buttonId:"allyButtonId",

formId:"allyForm",

corporateFormId:"corporateForm",

editFlag:true

};

 

ally.gridInit = {

 

bFilter:true,

   lengthChange:true,

   paging:true,

   serverSide:true,

   search:true,

   processing:true,

   scrollY:500,

   scrollX:"100%",

scrollXInner:"100%",

   scrollCollapse:false,

   jQueryUI:false,

   autoWidth:true,

   autoSearch:false,

   aaSorting:[[11, "asc" ]],

   Loading:true,

   initComplete:function initComplete(){

   if(ally.property.buttonId!=""){

   $("#"+ally.property.buttonId).append(ally.buttons);

   }

    

    if(ally.gridInit.search){

   $search = $("input[type='search']");

   //隐藏搜索框

   $search.parent().hide();

   }

     

    $("#"+ally.property.buttonId).attr("align","right");

       $("#"+ally.property.buttonId).attr("style","width:80%");

    $("#wrapper").hideLoading();

   }

};

 

ally.url="/ally/ally/";

ally.requestUrl = {

queryList:ally.url+"allyList.html",

addData:ally.url+"addAlly.html",

editData:ally.url+"editAlly.html",

queryById:ally.url+"AllyView.html",

fileUpload:ally.url+"fileUpload.html",

querySysLookupByCode:ally.url+"querySysLookupByCode.html",

getEnclosureList:ally.url+"getEnclosureList.html",

fileDelete:ally.url+"fileDelete.html",//删除上传文件

queryAreaString:ally.url+"queryAreaString.html",

queryAllyIdByUuid:ally.url+"queryContractPersonInfo.html"

};

 

ally.search={

uuid:""

};

 

ally.status= [

      {"searchable": false,"orderable": false,"targets": 0},//第一行不进行排序

      {"targets": [11],"visible": false},

    {

             sDefaultContent : '',

             aTargets : [ '_all' ]

        }

      ];

 

ally.filed =[

        //这里的nTd代表的是table的Cell，sData表示的是uuid的值，oData？？，iRow为从0开始到9（一页的数据）,iCol为0，第一列。

      //这里的this其实是指操作的datatable：var table =  $('#'+eloancn.tableName).dataTable();

      { "data": "uuid","createdCell": function (nTd, sData, oData, iRow, iCol) {

      var startnum=this.api().page()*(this.api().page.info().length);

      var number = iRow+1+startnum;

      $(nTd).html("<div style='text-align:center'>"+number+"</div>");

      },

      "bSortable" : false,

      "aTargets" : [ 0 ]

      },

      {"data": "name", "createdCell": function (nTd, sData, oData, iRow, iCol) {

      $(nTd).html(commonUtils.subString(sData));

   }

      },

      {"data": "parentName","createdCell": function (nTd, sData, oData, iRow, iCol) {

   if(sData==""){

   $(nTd).html("北京同城翼龙网络科技有限公司");

   }else{

   $(nTd).html(sData);

   }

   }

      },

      {"data": "allyType","createdCell": function (nTd, sData, oData, iRow, iCol) {

   var userName = "";

   //翻译借款类型

   eloancnCommonJS.sysLookupItemName("ALLY_TYPE",sData,function(data){

$(nTd).html(data);

});

   }

      }, 

      {"data": "investmentType","createdCell": function (nTd, sData, oData, iRow, iCol) {

   var userName = "";

   //翻译借款类型

   eloancnCommonJS.sysLookupItemName("ALLY_INVESTMENT_TYPE",sData,function(data){

$(nTd).html(data);

});

   }

      }, 

     // {"data": "status"},

      {"data": "contractPerson", "createdCell": function (nTd, sData, oData, iRow, iCol) {

      $(nTd).html(commonUtils.subString(sData));

   }

      },

      {"data": "companyName", "createdCell": function (nTd, sData, oData, iRow, iCol) {

      $(nTd).html(commonUtils.subString(sData));

   }

      },

      {"data": "legalPerson"},

      {"data": "updateUser", "createdCell": function (nTd, sData, oData, iRow, iCol) {

      commonUtils.sysUserName(sData,function(data){

      $(nTd).html(data);

      });

  }

      },

      {"data": "updateTime"},

      {"data": "createTime"},

      {"data": "id"}

 ];

 

ally.buttons = buttonStr; 

 

 

后台：

// Map<String, Object> param = new HashMap<String, Object>();

// // 排序和搜索

    param.putAll(sortAndSearch(request, 14));

// 分页开始

int pageNoInt = Integer.valueOf(request.getParameter("start"));// 起始页

int pageLength = Integer.valueOf(request.getParameter("length"));// 每页显示多少条

 

processParam4QueryPage(param);

 

String jsonData = allyService.getPageListAlly(param, pageNoInt == 0 ? 1 : pageNoInt / pageLength + 1,pageLength);

 

/**

* 列表字段排序

* @param param

* @param request

* @return

* Map<String,Object>

*

*/

protected Map<String,Object> sortAndSearch(HttpServletRequest request,int numberSize){

 

Map<String, Object> param = new HashMap<String, Object>();

//定义列名

String[] cols = new String[numberSize];

for(int i=0;i<numberSize;i++){

 

String searchValue = request.getParameter("columns["+i+"][search][value]");

String filed = request.getParameter("columns["+i+"][data]");

if(searchValue!=null &&!searchValue.equals("")){

 

param.put(filed, searchValue);

}

cols[i] = filed;

}

 

   //获取客户端需要那一列排序

   String orderColumn = "0";

   orderColumn = request.getParameter("order[0][column]");

   orderColumn = cols[Integer.parseInt(orderColumn)];

   //获取排序方式 默认为asc

   String orderDir = "asc";

   orderDir = request.getParameter("order[0][dir]");

   //获取用户过滤框里的字符

   param.put("orderColumn", orderColumn);

param.put("orderType", orderDir);

return param;

}