網站的後臺，多數是需要使用datatable來展示數據的，因為datatable的功能比較強大，可以更好的使用。 引用css html代碼 js代碼 服務端代碼 ...
網站的後臺，多數是需要使用datatable來展示數據的，因為datatable的功能比較強大，可以更好的使用。
引用css
<link href="../../static/assets/advanced-datatable/media/css/demo_page.css" rel="stylesheet" />
<link href="../../static/assets/advanced-datatable/media/css/demo_table.css" rel="stylesheet" />html代碼
<!--篩選條件-->
<div class="col-sm-12" style="margin-top: 10px;">
<input type="text" class="form-control" id="txtmobile" placeholder="手機號碼" style="display: inline-block; width: 200px;"/>
<input type="text" class="form-control" id="txtrealname" placeholder="真實姓名" style="display: inline-block; width: 200px;"/>
<input type="text" class="form-control Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" onclick="WdatePicker()" placeholder="登錄時間開始" id="txtlogintimestart" style="display: inline-block; width: 200px; height: 32px;"/>-
<input type="text" class="form-control Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" onclick="WdatePicker()" placeholder="登錄時間結束" id="txtlogintimeend" style="display: inline-block; width: 200px; height: 32px;"/>
<button type="button" class="btn btn-primary " style="display: inline-block;" onclick="articlesearch()">搜索</button>
</div>
<!--Table-->
<div class="col-sm-12">
<table class="table table-hover" id="hidden-table-info">
<thead>
<tr>
<th class="hidden-phone">編號</th>
<th class="hidden-phone">手機號碼</th>
<th class="hidden-phone">真實姓名</th>
<th class="hidden-phone">支付寶</th>
<th class="hidden-phone">支付寶二維碼</th>
<th class="hidden-phone">微信</th>
<th class="hidden-phone">微信二維碼</th>
<th class="hidden-phone">開戶銀行</th>
<th class="hidden-phone">銀行卡號</th>
<th class="hidden-phone">開戶人</th>
<th class="hidden-phone">賬戶餘額</th>
<th class="hidden-phone">添加時間</th>
<th class="hidden-phone">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>js代碼
<script type="text/javascript" src="../../static/assets/advanced-datatable/media/js/jquery.dataTables.js"></script>
<script type="text/javascript">
var oTable;
var mobile;
var logintimestart;
var logintimeend;
var realname;
//創建表格
$(document).ready(function () {
oTable = $('#hidden-table-info').dataTable({
"aaSorting": [],
"bProcessing": true,
"bServerSide": true,
"serverSide": true,
"aLengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
"sPaginationType": "full_numbers",
"bFilter": false,
"bSort": true,
"sAjaxSource": "../../handler/workerHandler.aspx",
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ name: "action", value: "GetWorkerData" });
aoData.push({ name: "mobile", value: $("#txtmobile").val() });
aoData.push({ name: "realname", value: $("#txtrealname").val() });
aoData.push({ name: "logintimestart", value: $("#txtlogintimestart").val() });
aoData.push({ name: "logintimeend", value: $("#txtlogintimeend").val() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}, "aoColumnDefs": [{
"aTargets": [-1],
"mRender": function (data, type, full) {
return '<button class="btn btn-primary btn-xs" title="點擊編輯標題" onclick="btn_workeredit(' data ',$(this))" style="margin-bottom:10px;">編輯</button><br/><button class="btn btn-primary btn-xs" title="點擊刪除" onclick="btn_worderdelete(' data ')">刪除</button>';
},
}],
"aoColumns": [
{ "mData": "workerID" },
{ "mData": "mobile" },
{ "mData": "realName" },
{ "mData": "alipay" },
{
"mData": "alipayQRCode", "bSortable": false, "fnRender": function (obj) {
var data = obj.aData.alipayQRCode;
if (data != "" && data != null) {
return '<a href="' data '" target="_blank" title="點擊查看原圖"><img src="' data '" style="width:80px;height:80px;" /></a>';
} else {
return "";
}
}
},
{ "mData": "wechat" },
{
"mData": "wechatQRCode", "bSortable": false, "fnRender": function (obj) {
var data = obj.aData.wechatQRCode;
if (data!=""&&data!=null) {
return '<a href="' data '" target="_blank" title="點擊查看原圖"><img src="' data '" style="width:80px;height:80px;" /></a>';
} else {
return "";
}
}
},
{ "mData": "bank" },
{ "mData": "bankCardNumber" },
{ "mData": "bankCardName" },
{ "mData": "fund" },
{
"mData": "addTime", "fnRender": function (obj) {
var date = obj.aData.addTime;
return DataTable_TimeFormat(date);
}
},
{ "mData": "workerID", "bSortable": false },
],
});
$("#hidden-table-info_length").append(" <button type='button' class='btn btn-danger' onclick='btn_reset()'>重置查詢條件</button> <button type='button' class='btn btn-danger' onclick='btn_workeradd()'>添加工作人員</button>");
});
//時間格式化
function DataTable_TimeFormat(date) {
if (date != "" && date != null) {
var reg = /\./;//用來驗證數字，包括小數的正則
if (reg.test(date)) {
date = date.split('.')[0];
}
return date.replace("T", " ");
} else {
return "";
}
}
//搜索
function articlesearch(sort) {
mobile = $("#txtmobile").val();
realname = $("#txtrealname").val();
logintimestart = $("#txtlogintimestart").val();
logintimeend = $("#txtlogintimeend").val();
$("#hidden-table-info").dataTable().fnPageChange('first', true);
}
//重置搜索
function btn_reset() {
$("#txtmobile").val("");
$("#txtrealname").val("");
$("#txtlogintimestart").val("");
$("#txtlogintimeend").val("");
mobile = null;
realname = null;
logintimestart = null;
logintimeend = null;
$("#hidden-table-info").dataTable().fnPageChange('first', true);
}
</script>服務端代碼
private object data = "";
private object result = "";
private int sEcho, iDisplayStart, iDisplayLength, sortid, count;
private bool sorttype;
protected void Page_Load(object sender, EventArgs e)
{
string act = null;
try
{
act = Request["action"].ToString();
sEcho = Convert.ToInt32(Request["sEcho"]);
iDisplayStart = Convert.ToInt32(Request["iDisplayStart"]);//開始記錄數
iDisplayLength = Convert.ToInt32(Request["iDisplayLength"]);//結束記錄數
if (!int.TryParse(Request["iSortCol_0"], out sortid))//按哪列來排序
{
sortid = -1;
}
sorttype = Request["sSortDir_0"] == "asc" ? false : true;//升序還是降序
if (!string.IsNullOrEmpty(act))
{
switch (act)
{
case "GetWorkerData": GetWorkerData(); break;//獲取工作人員信息
}
}
result = data;
}
catch (Exception ex)
{
result = ReturnMsg(Enum_return.失敗, ex.Message, null);
}
Response.Write(result);
}
#region 獲取工作人員
private void GetWorkerData()
{
//按條件搜索
string mobile = Request["mobile"];//手機號碼
string realname = Request["realname"];//用戶類型
string logintimestart = Request["logintimestart"];//登錄時間開始
string logintimeend = Request["logintimeend"];//登錄時間結束
//獲取所有數據
List<yw_houseAgent_worker> list = null;
IQueryable<yw_houseAgent_worker> result = Ctx.yw_houseAgent_worker;
#region 排序區分
switch (sortid)
{
case 0:
if (sorttype) result = result.OrderByDescending(c => c.workerID);
else result = result.OrderBy(c => c.workerID);
break;
case 1:
if (sorttype) result = result.OrderByDescending(c => c.mobile);
else result = result.OrderBy(c => c.mobile);
break;
case 2:
if (sorttype) result = result.OrderByDescending(c => c.realName);
else result = result.OrderBy(c => c.realName);
break;
case 3:
if (sorttype) result = result.OrderByDescending(c => c.alipay);
else result = result.OrderBy(c => c.alipay);
break;
case 5:
if (sorttype) result = result.OrderByDescending(c => c.wechat);
else result = result.OrderBy(c => c.wechat);
break;
case 7:
if (sorttype) result = result.OrderByDescending(c => c.bank);
else result = result.OrderBy(c => c.bank);
break;
case 8:
if (sorttype) result = result.OrderByDescending(c => c.bankCardNumber);
else result = result.OrderBy(c => c.bankCardNumber);
break;
case 9:
if (sorttype) result = result.OrderByDescending(c => c.bankCardName);
else result = result.OrderBy(c => c.bankCardName);
break;
case 10:
if (sorttype) result = result.OrderByDescending(c => c.fund);
else result = result.OrderBy(c => c.fund);
break;
case 11:
if (sorttype) result = result.OrderByDescending(c => c.addTime);
else result = result.OrderBy(c => c.addTime);
break;
default:
if (sorttype) result = result.OrderByDescending(c => c.workerID);
else result = result.OrderBy(c => c.workerID);
break;
}
#endregion
if (!string.IsNullOrEmpty(mobile) || !string.IsNullOrEmpty(realname) || !string.IsNullOrEmpty(logintimestart) || !string.IsNullOrEmpty(logintimeend)) //搜索情況
{
#region 搜索情況
if (mobile.Trim().Length > 0)//手機號碼
{
result = result.Where(c => c.mobile.Contains(mobile));
}
if (realname.Trim().Length > 0)//姓名
{
result = result.Where(c => c.realName.Contains(realname));
}
if (logintimestart.Trim().Length > 0 && logintimeend.Trim().Length > 0)//搜索查詢時間
{
DateTime bstart = Convert.ToDateTime(logintimestart);
DateTime bend = Convert.ToDateTime(logintimeend);
result = result.Where(c => c.addTime >= bstart && c.addTime <= bend);
}
#endregion
}
count = result.Where(c => c.serialID == CurrentSerialID && c.isDelete == false).Count();
list = result.Where(c => c.serialID == CurrentSerialID && c.isDelete == false).Skip(iDisplayStart).Take(iDisplayLength).ToList();
string str = SerializeTableData(sEcho, count, list);
Response.Write(str);
Response.End();
}
#endregion
