JS：jquery.dataTables.bootstrap插件详解
dataTable介绍
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
1. 列表显示
html
订单列表
ID
主订单号
订单类型
物流信息
买家留言
支付日期
订单状态
订单商品
js
$('#orderTable').dataTable({
"bPaginate": true,//分页工具条显示
"bStateSave": false, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bScrollCollapse": true, //当显示的数据不足以支撑表格的默认的高度
"bLengthChange": true, //每页显示的记录数
"bFilter": false, //搜索栏
"bInfo": true, //显示表格信息
"bSort": false, //是否支持排序功能
"bAutoWidth": false, //自适应宽度
"bJQueryUI": false,//是否开启主题
"bDestroy": true,
"bProcessing": false, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
"bServerSide": true,//服务器处理分页，默认是false，需要服务器处理，必须true
"sAjaxDataProp": "aData",//是服务器分页的标志，必须有
"sServerMethod": "POST", // 请求方式 默认为GET
"sAjaxSource": "${pageContext.request.contextPath}/manage/order/getTableData",//通过ajax实现分页的url路径。
"fnServerParams": function (aoData) { //查询条件
aoData.push(
{"name": "mainorderNum", "value": $("#mainorderNum").val()},
{"name": "phone", "value": $("#phone").val()},
{"name": "deliveryState", "value": $("#deliveryState").val()},
{"name": "orderType", "value": $("#orderType").val()},
{"name": "orderState", "value": $("#orderState").val()},
{"name": "startTime", "value": $("#startTime").val()},
{"name": "endTime", "value": $("#endTime").val()},
{"name": "goodsId", "value": $("#ddGoods").val()}
)
},
"aoColumns": [//初始化要显示的列
{
"mDataProp": "id",//获取列数据
"sClass": "center",//显示样式
"mRender": function (data, type, full) {//返回自定义的样式
return ""
}
},
{
"sWidth": "60px",
"mDataProp": "id",//获取列数据，跟服务器返回字段一致
"sClass": "left",//显示样式
"title": "ID"
},
{
"sWidth": "150px",
"mDataProp": "mainorderNum",
"mRender": function (data, type, full) {
return data + "
外部订单号：" + (full['outerOrderNum'] == null ? "" : full['outerOrderNum']);
}
},
{
"sWidth": "80px",
"mDataProp": "orderType",
"mRender": function (data, type, full) {
if (data == 0) {
return "有赞"
} else if (data == 1) {
return "淘宝"
} else if (data == 2) {
return "手工"
} else if (data == 3) {
return "提货卡"
} else {
return ""
}
}
},
{
"mDataProp": "addressee",
"mRender": function (data, type, full) {
var html = full['addressee'] + " - " + full['phone'] + " - ";
if (full['yzExpressType'] != 1) {
html += full['province'] + " - " + full['city'] + " - " + full['district'] + " - " + full['address'];
} else {
html += full['address'];
}
html += "
物流类型：";
//物流类型 0:快递发货; 1:到店自提; 2:同城配送; 9:无需发货（虚拟商品订单）
if (full['yzExpressType'] == 0) {
html += "快递发货"
} else if (full['yzExpressType'] == 1) {
html += "到店自提"
} else if (full['yzExpressType'] == 2) {
html += "同城配送"
} else if (full['yzExpressType'] == 9) {
html += "无需发货"
} else {
html += ""
}
return html;
}
},
{
"mDataProp": "buyerMessag"
},
{
"mDataProp": "orderTime",
"mRender": function (data, type, full) {
return timeStampToString(data);
}
},
{
"mDataProp": "orderState",
"mRender": function (data, type, full) {
//0 待付款 1 待送货 2 已发货 3 已收货 4交易关闭 5退款中
var html = "";
if (data == 0) {
html = "待付款"
} else if (data == 1) {
html = "待发货"
} else if (data == 2) {
html = "已发货"
} else if (data == 3) {
html = "交易完成"
} else if (data == 4) {
html = "交易关闭"
} else if (data == 5) {
html = "退款中"
} else {
html = ""
}
if (full['yzIsSync'] == 0 && full['orderType'] == 0) {
html += "
量大于2";
}
return html;
}
},
{
"mDataProp": "orderGoods",
"mRender": function (data, type, full) {
var html = "";
for (var i = 0; i < data.length; i++) {
html = html + ""
html = html + "![](${pageContext.request.contextPath}/upload/" + data[i].img + ")
";
if (data[i].goodsId == 0) {
html = html + "" + "商品ID：" + data[i].outGoodsId + " 规格ID：" + data[i].outSkuid + "";
} else {
html = html + data[i].goodsName;
html = html + "(" + data[i].goodsNum + ")" + data[i].model + "(" + data[i].validNum + data[i].texture + ")";
}
html = html + "
";
if (isupdate == 1) {
//判断是否有赞自提订单
if (full['orderType'] == 0 && full['yzExpressType'] == 1) {
//手工订单
} else if (full['orderType'] == 2) {
//快递发货
if (full['yzExpressType'] == 0) {
//到店自提
} else if (full['yzExpressType'] == 1) {
html += "" +
" 短 信 " +
"";
}
}
//快递发货
if (full['yzExpressType'] == 0 && (full['orderState'] == 1 || full['orderState'] == 2)
&& (data[i].expressSate == null || data[i].expressSate == 1)) { //待送货状态
html += "";
html += "";
html += "";
html += "" +
" 短 信 " +
"";
}
if (full['orderState'] == 1 && full['orderType'] == 2) {
html += "" +
"删除订单" +
"";
} else if (data[i].expressSate == 2) { //已发货
html += "" +
"物流状态：已发货，" + data[i].expressType + "面单号【" + data[i].slogisticCode + "】" +
"";
} else if (data[i].expressSate == 3) { //已签收
html += "" +
"物流状态：已签收，" + data[i].expressType + "面单号【" + data[i].slogisticCode + "】" +
"";
}
}
html = html + "";
}
return html;
}
}
],
"oLanguage": {//语言设置
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项记录",
"sZeroRecords": "没有匹配记录",
"sInfo": "显示第 _START_ 至 _END_ 条记录，共 _TOTAL_ 条",
"sInfoEmpty": "显示第 0 至 0 条记录，共 0 条",
"sInfoFiltered": "",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
2. 条件查询
html
查询条件
<%--模板下载--%>
<%----%>
<%--Excel导出--%>
<%----%>
js
"fnServerParams": function (aoData) { //查询条件
aoData.push(
{"name": "mainorderNum", "value": $("#mainorderNum").val()},
{"name": "phone", "value": $("#phone").val()},
{"name": "deliveryState", "value": $("#deliveryState").val()},
{"name": "orderType", "value": $("#orderType").val()},
{"name": "orderState", "value": $("#orderState").val()},
{"name": "startTime", "value": $("#startTime").val()},
{"name": "endTime", "value": $("#endTime").val()},
{"name": "goodsId", "value": $("#ddGoods").val()}
)
},
//查询
$("#query").click(function () {
$("#orderTable").dataTable().fnDraw(true);
});
3. 导入导出
html
上 传：
格式：.xls
js
//导入文件
function importExp() {
name = $("#upfile").val();
if (name == "") {
alert("请先选择文件！");
return;
}
layer.msg("开始导入订单...");
var formData = new FormData();
formData.append("file", $("#upfile")[0].files[0]);
formData.append("name", name);
$.ajax({
url: '/manage/order/upload',
type: 'POST',
async: false,
data: formData,
// 告诉jQuery不要去处理发送的数据
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
dataType: 'JSON',
beforeSend: function () {
console.log("正在进行，请稍候");
},
success: function (result) {
var res = result.res;
var resmsg = result.resMsg;
if (res != 0 && res != "0") {
layer.msg("导入成功" + resmsg + "条数据！");
$("#upfile").val("");
$("#orderTable").dataTable().fnDraw(true);
window.location.reload();
} else {
alert("导入失败，" + resmsg);
$("#upfile").val("");
window.location.reload();
}
}
});
}
4. 编辑修改一
html
js
var ztid = $("#ztid").val();
$('#ztCode').modal('show');
$.ajax({
type: "POST",
url: "/manage/order/modifySlogisticCode",
data: {
id: goodsId,
expressType: expressType,
slogisticCode: slogisticCode
},
dataType: "json",
success: function (data) {
if (data.res == 1) {
layer.msg("面单号提交成功")
$("#orderTable").dataTable().fnDraw(true);
$('#ztCode').modal('hide');
} else {
alert(data.resMsg);
$('#ztCode').modal('hide');
}
}
});
5. 编辑修改二
html
js
点击修改按钮，使用layer.open方法加载toadd页面；
controller查询add页面需要的参数加到model中返回；
在add页面提交数据，刷新列表；
//手工订单
function handOrderGoods(id) {
handIndex=layer.open({
type: 2,
title: '手工订单',
shadeClose: true,
shade: 0.8,
area: ['800px', '500px'],
content: '${pageContext.request.contextPath}/manage/card/toCardphoneOrderAdd?id='+id //iframe的url
});
}