datatable实例教程

网站的后台，多数是需要使用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("&nbsp;<button type='button' class='btn btn-danger' onclick='btn_reset()'>重置查询条件</button>&nbsp;<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