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
<script src="${pageContext.request.contextPath}/core/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.dataTables.bootstrap.js"></script>
<div class="col-xs-12">
<div class="table-header">
订单列表
</div>
<div class="table-responsive">
<table id="orderTable" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center" style="width: 50px;">
<label>
<input type="checkbox" class="ace"/>
<span class="lbl"></span>
</label>
</th>
<th class="hidden-480" style="width: 80px;">ID</th>
<th class="hidden-480" style="width: 150px;">主订单号</th>
<th class="hidden-480" style="width: 130px;">订单类型</th>
<th class="hidden-480" style="width: 150px;">物流信息</th>
<th class="hidden-480" style="width: 80px;">买家留言</th>
<th class="hidden-480" style="width: 100px;">支付日期</th>
<th class="hidden-480" style="width: 70px;">订单状态</th>
<th class="hidden-480" style="width: 400px;">订单商品</th>
</tr>
</thead>
</table>
</div><!--/.table-responsive -->
</div><!-- /.col -->
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 "<label><input type='checkbox' class='ace' /><span class='lbl'></span></label>"
}
},
{
"sWidth": "60px",
"mDataProp": "id",//获取列数据，跟服务器返回字段一致
"sClass": "left",//显示样式
"title": "ID"
},
{
"sWidth": "150px",
"mDataProp": "mainorderNum",
"mRender": function (data, type, full) {
return data + "<br> 外部订单号：" + (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 += "<br>物流类型：";
//物流类型 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 = "<span class='label label-warning'>待付款</span>"
} else if (data == 1) {
html = "<span class='label label-warning'>待发货</span>"
} else if (data == 2) {
html = "<span class='label label-primary'>已发货</span>"
} else if (data == 3) {
html = "<span class='label label-primary'>交易完成</span>"
} else if (data == 4) {
html = "<span class='label label-primary'>交易关闭</span>"
} else if (data == 5) {
html = "<span class='label label-primary'>退款中</span>"
} else {
html = ""
}
if (full['yzIsSync'] == 0 && full['orderType'] == 0) {
html += "<br>量大于2";
}
return html;
}
},
{
"mDataProp": "orderGoods",
"mRender": function (data, type, full) {
var html = "";
for (var i = 0; i < data.length; i++) {
html = html + "<div class='col-sm-12' style='margin-bottom:10px;'>"
html = html + "<img src='${pageContext.request.contextPath}/upload/" + data[i].img + "' style='width:50px;height:50px;margin-bottom:5px;' /> ";
if (data[i].goodsId == 0) {
html = html + "<a id='" + data[i].id + "' title='" + data[i].goodsName1 + "<br>商品ID：" + data[i].outGoodsId + "<br>规格ID：" + data[i].outSkuid + "' href='javascript:refreshGoods(" + data[i].id + ")'>" + "商品ID：" + data[i].outGoodsId + " 规格ID：" + data[i].outSkuid + "</a>";
} else {
html = html + data[i].goodsName;
html = html + "(" + data[i].goodsNum + ")" + data[i].model + "(" + data[i].validNum + data[i].texture + ")";
}
html = html + "<br>";
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 += "<a class='blue' href=javascript:sendSMS('" + data[i].id + "')>" +
" 短 信 " +
"</a>";
}
}
//快递发货
if (full['yzExpressType'] == 0 && (full['orderState'] == 1 || full['orderState'] == 2)
&& (data[i].expressSate == null || data[i].expressSate == 1)) { //待送货状态
html += "<select class='col-sm-3' style='padding:0 0' onchange=sendGoods('" + data[i].id + "',this.value)>" +
"<option value=''>下发货单</option>"
for (var n in expressList) {
html += "<option value='" + expressList[n].name + "'>" + JSON.parse(expressList[n].value).type + "</option>"
}
html += "</select>";
html += "<select class='col-sm-3' style='padding:0 0' onchange=javascript:printFaceSheet('" + data[i].orderNum + "',this.value)>" +
"<option value=''>打印面单</option>"
for (var n in expressList) {
html += "<option value='" + expressList[n].name + "'>" + JSON.parse(expressList[n].value).type + "</option>"
}
html += "</select>";
html += "<select class='col-sm-3' style='padding:0 0' onchange=javascript:faceSheetCode('" + data[i].id + "',this.value)>" +
"<option value=''>录入面单号</option>"
html += "<option value='zt'>无需发货</option>";
for (var n in expressList) {
html += "<option value='" + expressList[n].name + "'>" + JSON.parse(expressList[n].value).type + "</option>"
}
// html += "<option value='zt'>自提订单</option>"
html += "</select>";
html += "<a class='blue' href=javascript:sendSMS('" + data[i].id + "')>" +
" 短 信 " +
"</a>";
}
if (full['orderState'] == 1 && full['orderType'] == 2) {
html += "<a class='blue' href=javascript:deleteOrder('" + full['orderNum'] + "')>" +
"删除订单" +
"</a>";
} else if (data[i].expressSate == 2) { //已发货
html += "<a class='blue' href=javascript:sendState('" + data[i].expressId + "')>" +
"物流状态：已发货，" + data[i].expressType + "面单号【" + data[i].slogisticCode + "】" +
"</a>";
} else if (data[i].expressSate == 3) { //已签收
html += "<a class='blue' href=javascript:sendState('" + data[i].expressId + "')>" +
"物流状态：已签收，" + data[i].expressType + "面单号【" + data[i].slogisticCode + "】" +
"</a>";
}
}
html = html + "</div>";
}
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
<div class="col-xs-12">
<div class="table-header">
查询条件
</div>
<div class="query_well">
<br>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="col-sm-1 control-label center" for="mainorderNum">
主订单号： </label>
<div class="col-sm-2">
<input type="text" id="mainorderNum" placeholder="主订单号"
class="col-xs-10 col-sm-12"/>
</div>
<label class="col-sm-1 control-label center" for="phone"> 买家电话： </label>
<div class="col-sm-2">
<input type="text" id="phone" placeholder="买家电话"
class="col-xs-10 col-sm-12"/>
</div>
<label class="col-sm-1 control-label center" for="startTime"> 创建时间： </label>
<div class="col-sm-5">
<div class="col-sm-12">
<div class="col-sm-5">
<input class="col-sm-12" id="startTime" type="text"
readonly="readonly" placeholder="开始日期"/>
</div>
<label class="col-sm-2 control-label center"> — </label>
<div class="col-sm-5">
<input class="col-sm-12" id="endTime" type="text"
readonly="readonly" placeholder="结束日期"/>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="col-sm-1 control-label center" for="orderType"> 订单类型： </label>
<div class="col-sm-2">
<select class="col-sm-12" id="orderType" style="padding:0 0">
<option value=""> 请选择类型</option>
<option value="0"> 有赞商城订单</option>
<option value="1"> 淘宝商城订单</option>
<option value="2"> 手工订单</option>
<option value="3"> 提货卡自动订单</option>
</select>
</div>
<label class="col-sm-1 control-label center" for="orderState">
订单状态： </label>
<div class="col-sm-2">
<select class="col-sm-12" id="orderState" style="padding:0 0">
<option value=""> 请选择状态</option>
<option value="0">待付款</option>
<option value="1">待发货</option>
<option value="2">已发货</option>
<option value="3">交易完成</option>
<option value="4">交易关闭</option>
<option value="5">退款中</option>
</select>
</div>
<label class="col-sm-1 control-label center" for="ddGoods"> 订单商品： </label>
<div class="col-sm-2">
<select class="col-sm-12" id="ddGoods" style="padding:0 0">
<option value=""> 请选择商品</option>
<c:forEach items="${ddGoodList}" var="ddgood"
varStatus="roleStatus">
<option value="${ddgood.id}"> ${ddgood.name}</option>
</c:forEach>
</select>
</div>
<div class="col-sm-1">
<div class="col-sm-12">
<div class="col-sm-1">
<button id="query" class="btn btn-sm btn-success">
查 询
</button>
</div>
</div>
</div>
<c:if test="${auth.isadd == 1}">
<div class="col-sm-1">
<div class="col-sm-12">
<div class="col-sm-1">
<button id="importYz" class="btn btn-sm btn-success">
同步有赞订单
</button>
</div>
</div>
</div>
</c:if>
<div class="col-sm-1">
<%--<div id="demoOut" class="MyCssBtn leftBtn" onclick="demoOut();"><span>模板下载</span>--%>
<%--</div>--%>
<%--<div id="excelOut" class="MyCssBtn leftBtn" onclick="excelOut();"><span>Excel导出</span>--%>
<%--</div>--%>
</div>
</div>
</div>
</div>
<br>
</div>
</div><!-- 查询条件 -->
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
<div class="row" style="height: 50px;">
<div class="col-xs-12">
<div class="form-group">
<c:if test="${auth.isadd == 1}">
<li class="col-sm-2">
<button onclick="addOrder();" class="btn btn-success btn-sm ">新 增</button>
</li>
</c:if>
<form class="col-sm-2" action="/manage/order/downLoadDemo" method="post">
<input type="submit" class="btn btn-success btn-sm " value="模板下载">
</form>
<form class="col-sm-2" action="/manage/order/download" method="post" onsubmit="checkForm()">
<input type="submit" class="btn btn-success btn-sm " value="Excel导出">
<input id="mainorderNum1" name="mainorderNum" value="" style="display: none"></input>
<input id="phone1" name="phone" value="" style="display: none"></input>
<input id="deliveryState1" name="deliveryState" value="" style="display: none"></input>
<input id="orderType1" name="orderType" value="" style="display: none"></input>
<input id="orderState1" name="orderState" value="" style="display: none"></input>
<input id="startTime1" name="startTime" value="" style="display: none"></input>
<input id="endTime1" name="endTime" value="" style="display: none"></input>
<input id="goodsId1" name="goodsId" value="" style="display: none"></input>
</form>
<c:if test="${auth.isadd == 1}">
<li class="col-sm-1">
<span>上 传：</span>
</li>
<li class="col-sm-3">
<span>
<input type="file" accept=".xls" id="upfile" name="upfile" placeholder="">
</span>
</li>
<li class="col-sm-2">
<button id="importExp" onclick="importExp();" class="btn btn-success btn-sm ">导 入</button>
<span>格式：.xls</span>
</li>
</c:if>
</div>
</div>
</div><!-- 导入导出 -->
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
<div class="modal fade" id="ztCode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabe2">填写运单信息</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<label class="col-sm-4 control-label text-right" for="slogisticCode">自提点： </label>
<div class="col-sm-6">
<select class="col-sm-12" id="ztid" style="padding:0 0">
<option value=""> 请选择自提点</option>
<c:forEach items="${ztList}" var="zt" varStatus="roleStatus">
<option value="${zt.id}"> ${zt.name}</option>
</c:forEach>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveztCode">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
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
});
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
