datatables,表格

官方文档：https://datatables.net/

var dttblTaskOrderOptions={

order: [5, 'desc'],

ajax:{

url:"order/orderdelivery/search",

type:"POST",

data:function(data){

return JSON.stringify($.extend(data,dttblTaskOrderCondition));

},

dataType:"json",

contentType:"application/json",

dataSrc:function(res){

Utils.isAjaxSuccessed(res,{scope:$formTaskOrderSearch});

return res.data;

}

},

autoWidth:true,

processing : true,

serverSide : true,

columnDefs : [ {

targets : 0,

searchable : false,

orderable : false,

data : "operation",

render : function(data, type, row, meta) {

var buttons = [];

var btnDetail = $("<div></div>");

var btnCancel = $("<div></div>");

var btnModify = $("<div></div>");

var btnReturn = $("<div></div>");

var btnSubmit = $("<div></div>");

var btnVerify = $("<div></div>");

var verificationStatus = row.verificationStatus;

var orderType = row.orderType;

var deliveryOrderStatus = row.deliveryOrderStatus;

btnDetail.append($('<button type="button" class="btn btn-xs btn-success" data-widget="btnDetail"><i class="fa fa-info"></i>&nbsp;详情</button>')

.attr("data-string", JSON.stringify(row)));

buttons.push(btnDetail);

if(orderType=="日常订单"||orderType=="奔驰订单"||orderType=="大库订单"){

if(deliveryOrderStatus=="未提交发货"){

btnModify.append($('<button type="button" class="btn btn-xs btn-warning" data-widget="btnModify"><i class="fa fa-edit"></i>&nbsp;修改优惠</button>')

.attr("data-string", JSON.stringify(row)));

buttons.push(btnModify);

}

}

if(orderType=="日常订单"||orderType=="奔驰订单"||orderType=="大库订单"||orderType=="补货订单"||orderType=="补发订单"){

if(deliveryOrderStatus=="未提交发货"){

btnCancel.append($('<button type="button" class="btn btn-xs btn-danger" data-widget="btnCancel"><i class="fa fa-times"></i>&nbsp;取消</button>')

.attr("data-string", JSON.stringify(row)));

btnSubmit.append($('<button type="button" class="btn btn-xs btn-danger" data-widget="btnSubmit"><i class="fa fa-plane"></i>&nbsp;提交发货</button>')

.attr("data-string", JSON.stringify(row)));

buttons.push(btnCancel);

buttons.push(btnSubmit);

}

if(deliveryOrderStatus=="已提交发货"){

btnReturn.append($('<button type="button" class="btn btn-xs btn-danger" data-widget="btnReturn"><i class="fa fa-sign-out"></i>&nbsp;退订</button>')

.attr("data-string", JSON.stringify(row)));

buttons.push(btnReturn);

}

}

if(verificationStatus=="已核销"){

btnVerify.append($('<button type="button" class="btn btn-xs btn-danger" data-widget="btnReturnProduct"><i class="fa fa-sign-out"></i>&nbsp;退货</button>')

.attr("data-string", JSON.stringify(row)));

buttons.push(btnVerify);

}

return Utils.datatables.createInlineButton(buttons);

}

}],

columns : [null,

{ "data": "deliveryOrderCode"},

{ "data": "deliveryOrderStatus"},

{ "data": "orderCode" },

{ "data": "orderType" },

{ "data": "createdTime" ,render:function(data,type,row,meta){

var createdTime="";

if(data){

createdTime = moment(data).format("YYYY-MM-DD");

}

return createdTime;

}},

{ "data": "entityInternalCode" },

{ "data": "entityCompanyFullName" },

{ "data": "warehouseName" },

{ "data": "dispatchingType" },

{ "data": "productPurchasedTotalQuantity" ,className:"text-right"},

{ "data": "productPurchasedActualDeliveryQuantity",className:"text-right" },

{ "data": "productGiftActualDeliveryQuantity",className:"text-right" },

{ "data": "productTotalGrossWeight",className:"text-right",render:function(data,type,row,meta){

return $.number(data,3);

}},

{ "data": "productTaxIncludedTotalAmount",className:"text-right",render : function(data, type, row, meta) {

return $.number(data,2)||0.00;

}},

{ "data": "discountAmount",className:"text-right",render : function(data, type, row, meta) {

return $.number(data,2)||0.00;

}},

{ "data": "rebateAmount",className:"text-right",render : function(data, type, row, meta) {

return $.number(data,2)||0.00;

}},

{ "data": "productTaxIncludedTotalAmount",className:"text-right",render:function(data,type,row,meta){

var data = new Big(data);

var discountAmount = new Big(row.discountAmount);

var rebateAmount = new Big(row.rebateAmount);

data = data.minus(discountAmount).minus(rebateAmount);

var data = data.toString();

return $.number(data,2);

}

},

{ "data": "expectPickingDate",render:function(data,type,row,meta){

var expectPickingDate="";

if(data){

expectPickingDate = moment(data).format("YYYY-MM-DD");

}

return expectPickingDate;

}},

{ "data": "deliveryActualDate",render:function(data,type,row,meta){

var deliveryActualDate="";

if(data){

deliveryActualDate = moment(data).format("YYYY-MM-DD");

}

return deliveryActualDate;

}},

{ "data": "verificationStatus"}

]

}

var $dttbltaskorder = $("[data-widget=dttbltaskorder]").DataTable(dttblTaskOrderOptions);

//查询
var $btnsearch = $("button[data-widget=btnSearch]");

$btnsearch.click(function(e){

dttblTaskOrderCondition = Utils.formArrayToObject($formTaskOrderSearch.serializeArray());

$dttbltaskorder.draw();
});

$dttbltaskorder.colums() //列

$dttbltaskorder.cells()//单元格

$dttbltaskorder.data()//表格里的数据

可以通过render里的function（data, type, row, meta）的row绑定一行的数据（data-string）

博客地址：http://www.cnblogs.com/windseek/