dataTable介绍
DataTables is a plug-in for the jQuery 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
< src=\"${pageContext.request.contextPath}/core/js/jquery.min.js\"></ >
< src=\"${pageContext.request.contextPath}/assets/js/bootstrap.min.js\"></ >
< src=\"${pageContext.request.contextPath}/assets/js/jquery-ui-1.10.3.custom.min.js\"></ >
< src=\"${pageContext.request.contextPath}/assets/js/jquery.dataTables.min.js\"></ >
< src=\"${pageContext.request.contextPath}/assets/js/jquery.dataTables.bootstrap.js\"></ >
<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\",//显示样式
\" \": \"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 + \"\' =\'\" + data[i].goodsName1 + \"<br>商品ID：\" + data[i].outGoodsId + \"<br>规格ID：\" + data[i].outSkuid + \"\' href=\' :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= :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\' =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\' = :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\' = :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= :sendSMS(\'\" + data[i].id + \"\')>\" +
\" 短 信 \" +
\"</a>\";
}
if (full[\'orderState\'] == 1 && full[\'orderType\'] == 2) {
html += \"<a class=\'blue\' href= :deleteOrder(\'\" + full[\'orderNum\'] + \"\')>\" +
\"删除订单\" +
\"</a>\";
} else if (data[i].expressSate == 2) { //已发货
html += \"<a class=\'blue\' href= :sendState(\'\" + data[i].expressId + \"\')>\" +
\"物流状态：已发货，\" + data[i].expressType + \"面单号【\" + data[i].slogisticCode + \"】\" +
\"</a>\";
} else if (data[i].expressSate == 3) { //已签收
html += \"<a class=\'blue\' href= :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\" =\"demoOut();\"><span>模板下载</span>--%>
<%--</div>--%>
<%--<div id=\"excelOut\" class=\"MyCssBtn leftBtn\" =\"excelOut();\"><span>Excel导出</span>--%>
<%--</div>--%>
</div>
</div>
</div>
</div>
<br>
</div>
</div><!-- 查询条件 -->
js
//查询
$(\"#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 =\"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\" =\"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\" =\"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;
}
.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\") {
.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- \" 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) {
.msg(\"面单号提交成功\")
$(\"#orderTable\").dataTable().fnDraw(true);
$(\'#ztCode\').modal(\'hide\');
} else {
alert(data.resMsg);
$(\'#ztCode\').modal(\'hide\');
}
}
});
继续阅读与本文标签相同的文章
-
花旗投资现金流量预测公司Cashforce，拟新添增值服务
2026-05-18栏目： 教程
-
开发者必读 · 周报 | 003期
2026-05-18栏目： 教程
-
科技巨头正在合作解决自动驾驶标准！
2026-05-18栏目： 教程
-
人工智能帮助设计自行车并打破竞速纪录
2026-05-18栏目： 教程
-
分层存储超详细解读，为什么大数据时代它已不可或缺
2026-05-18栏目： 教程