JS：jquery.dataTables.bootstrap外掛詳解
阿新 • • 發佈：2018-12-18
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
});
}