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)

时间: 2024-11-06 11:02:57

datatables,表格的相关文章

前端常用功能记录(二)—datatables表格

并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添花!DataTables提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化.统计等强大功能. 工作中对程序员的学习模式才深有体会,不是从入门到精通,而是从会用到了解.对于我来说,基本都是拿到一个知识先做个东西出来,再来细细品味个中的细节,然后再慢慢理解.从粗到细,从大到小,呵呵,这种"逆向学

前端常用功能记录(二)—datatables表格(转)

前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添花!DataTables提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化.统计等强大功能. 工作中对程序员的学习模式才深有体会,不是从入门到精通,而是从会用到了解.对于我来说,基本都是拿到一个知识先做个东西出来,再来细细品味个中的细节,然后

jquery DataTables表格插件的使用(网页数据表格化及分页显示)

DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用DataTables: 只需要在html或ejs下引用写好的样式表css和脚本文件js,对应代码如下: 1 <head> 2 <link href="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css"

Datatables表格控件的使用相关网站及遇到的问题

1.官网教程链接:http://www.datatables.net/ 2.基础使用可参考他人博客链接:http://blog.csdn.net/mickey_miki/article/details/8240477,这个网址上的信息很全. 3.自己碰到的问题(本人后台使用Java开发): Question1:datatables 可以实现实时搜索数据列表,可如何将参数传入后台?(请查看思路和代码)                              (1)设置searching: tru

前端常用功能记录(三)—datatables表格初始化(转)

数据源 我经常使用的有两种,一种是JavaScript 中的数组,通过在初始化对象中传递一个名为 aaData 的数组,同样可以提供表格数据,前缀 aa 说明这是一个数组的数组,外层的数组表示表格的行,每一行同样是一个数组. (字段的命名可以使用类型加字段名称也可以直接使用如aaData,也可以是data,aoColumns,也可以是columns) 如: $(document).ready(function() { $('#demo').html( '<table class="tabl

前端常用功能记录(三)—datatables表格初始化

其实上篇说的也算是jQuery Datatables的初始化,但主要是对某些字段意义的理解.下面记录的是datatables常用的功能的初始化. 数据源 我经常使用的有两种,一种是JavaScript 中的数组,通过在初始化对象中传递一个名为 aaData 的数组,同样可以提供表格数据,前缀 aa 说明这是一个数组的数组,外层的数组表示表格的行,每一行同样是一个数组. (字段的命名可以使用类型加字段名称也可以直接使用如aaData,也可以是data,aoColumns,也可以是columns)

DataTables 表格固定栏使用方法

有时候数据过多,为了用户体验,需要将重要的栏目固定不动,如下图所示: 从上图我们可以看出,表格滚动的时候,左边5栏是不动的.现在说一下实现方法: 插件地址: https://datatables.net/ 使用方法: wageTable为表格的ID. var table = $('#wageTable').DataTable( { scrollX: true, scrollCollapse: true, paging: false, //不用分页 info: false, //隐藏表格底部信息

结合daterangepicker实现Datatables表格带参数查询

http://dt.thxopen.com/example/user_share/send_extra_param.html#@一颗树 http://www.guoxk.com/node/jquery-datatables jq datatables 分页事件问题! http://bbs.csdn.net/topics/390357326?page=1

.Net MVC&amp;&amp;datatables.js&amp;&amp;bootstrap做一个界面的CRUD有多简单

我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得比较漂亮.做开发要有工匠精神,不要只求完成开发任务,那样的话,永远停留在只是简单的写业务逻辑代码水平,我们要做有追求的程序员.本来这么简单的东西,我真是懒得写,但是看到即便是一些工作了好些年的人,做东西也是只管实现功能,啥都不管,还有些界面css样式要么就硬编要么就毫无规则的在页面中进行穿插,遇到要