datatables 入门例子

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

html页面：

<div >

</div>

</div>

</select>

</div>

</select>

</div>

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

</div>

</div>

</div>

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

</div>

</div>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

</div>

</div>

</div>

</div>

$().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;

}

datatables 入门例子

猜你喜欢