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> 详情</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> 修改优惠</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> 取消</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> 提交发货</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> 退订</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> 退货</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/
