chenpeng

分享一个bootstrap的表格封装
在一些资料中很大多数初学者都是看不懂的,因为不是太复杂就是介绍的不详细。那么我的文章就会讲的详细一些!我这个是bo...
扫描右侧二维码阅读全文
28
2019/01

分享一个bootstrap的表格封装

在一些资料中很大多数初学者都是看不懂的,因为不是太复杂就是介绍的不详细。那么我的文章就会讲的详细一些!我这个是bootstrap的表格
第一步先引用外部js

<link href="/js/datatables/jquery.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/js/datatables/dataTables.bootstrap.css">
<script src="/js/datatables/jquery.dataTables.min.js"></script>
<script src="/js/datatables/dataTables.bootstrap.min.js"></script>

第二步设置表格

层级 昵称 账号 手机号 注册时间 操作
3 不知道 73649543421323 15886442584 2018/08/31 11:41 激活 删除
3 不知道 73649543421323 15886442584 2018/08/31 11:41 激活 删除
3 不知道 73649543421323 15886442584 2018/08/31 11:41 激活 删除
3 不知道 73649543421323 15886442584 2018/08/31 11:41 激活 删除
3 不知道 73649543421323 15886442584 2018/08/31 11:41 激活 删除
3 不知道 73649543421323 15886442584 2018/08/31 11:41 激活 删除
3 不知道 73649543421323 15886442584 2018/08/31 11:41 激活 删除

第三步写出一部分表格属性,这里还有一部分在封装的js文件中

   <script>
    $(function () {
        GetUser();
    });
    function GetUser() {
        InitDataTableFromServer("tdUser",
            function (d) {
                d.name = $("#txtName").val();
                d.phome = $("#txtPhome").val();
                d.state = $("#apply_select").val();
                d.dtBegin = $("#dtBegin").val(),
                    d.dtEnd = $("#dtEnd").val()
            },
            "/Table/GetUserList",
            [{ data: 'U_Number' },
            { data: 'U_UserName' },
            { data: 'U_MobilePhone' },
            { data: 'U_AddTime' },
            { data: 'U_UserState' },
            { data: 'U_UserId' }]
            , [{
                data: 'U_UserState',
                render: function (data, type, full) {
                    if (data == 0) {
                        return '<span class="btn-small warning">待激活</span>';
                    }
                    if (data == 1) {
                        return '<span class="btn-small warning">托管中</span>';
                    }
                    if (data == 3) {
                        return '<span class="btn-small success">已激活</span>';
                    }
                    if (data == 4) {
                        return '<span class="btn-small important">已封禁</span>';
                    }
                },
                targets: [4]
            }, {
                data: 'U_UserId',
                render: function (data, type, full) {
                    return '<a href="#"  onclick="Activation(' + data + ');">激活</a>&nbsp;<a href="#" onclick="GetInto(' + data + ');">进入</a>';
                },
                targets: [5]
            }]
            , [[0, "asc"]]
            , null
            , null);
    }
</script>

第四步把以下js封装好

function InitDataTableFromServer(tableId, args, ajaxUrl, columns, columnDefs, orderBy, toolbarTopId, toolbarBottomId) {
    $('#' + tableId).DataTable({
        "pageLength": 10,
        "serverSide": true,
        "ajax": {
            "url": ajaxUrl,
            "type": "POST",
            "data": args
        },
        "fnInitComplete": function () {
            this.fnAdjustColumnSizing(true);
        },
        columns: columns,
        columnDefs: columnDefs,
        "order": orderBy,
        "paging": true,
        "lengthChange": true,
        "aLengthMenu": [5, 10, 25, 50, 100, 500],
        "searching": false,
        "ordering": false,
        "bProcessing": true,
        "info": true,
        "scrollX": false,
        "autoWidth": true,
        "pagingType": "simple",
        "drawCallback": function () {
            appendSkipPage(tableId);
        },
        "language": {
            "sProcessing": "<span style='color:#ff0000;'>加载中,请稍后...</span>",
            "lengthMenu": "每页: _MENU_ 条记录",
            "zeroRecords": "没有找到记录",
            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ) 总共 _TOTAL_ 条",
            "infoEmpty": "无记录",
            "infoFiltered": "(从 _MAX_ 条记录过滤)",
            "search": "模糊查询:",
            "paginate": {
                "first": "第一页",
                "last": "最后页",
                "next": "后一页",
                "previous": "前一页"
            },
        },

        "dom": '<"top"f>rt<"bottom"lip><"clear">',
        "buttons": [
        ]

    });

    $("div." + toolbarTopId).html($("#" + toolbarTopId).html());
    $("div." + toolbarBottomId).html($("#" + toolbarBottomId).html());

    SetTableOthers(tableId);
}

第五步在控制器中添加方法

public ActionResult StatisticalBuy()
    {
        int draw1 = Convert.ToInt32(Request["draw"]);
        int start = Convert.ToInt32(Request["start"]);
        int length = Convert.ToInt32(Request["length"]);
        if (length == 0)
        {
            length = 10;
        }
        string date = Request["dtBegin"].ToString();
        if (string.IsNullOrEmpty(date))
        {
            date = DateTime.Now.ToString("yyyy/MM/dd");
        }
        List<Statistical> list = new List<Statistical>();
        Statistical st = new Statistical();
     string sql = @"select SUM(O_CommodityPrice)as mony from H_Order
 where CONVERT(varchar(10),O_AddTime, 111)=CONVERT(varchar(10),'" + date + "', 111) and O_UserId in (select O_UserId from H_User where U_UserState!=4 and U_Clog=0) and O_CommodityType=0";

        DataSet dt = DbHelperSQL.Query(sql);

        st.BuyDate = date;
        if (string.IsNullOrEmpty(dt.Tables[0].Rows[0][0].ToString()))
        {
            st.Buymount = 0;
        }
        else
        {
            st.Buymount = decimal.Parse(dt.Tables[0].Rows[0][0].ToString());
        }

        list.Add(st);

        return Json(new { draw = draw1, recordsTotal = 0, recordsFiltered = 0, data = list }, JsonRequestBehavior.AllowGet);
    }
Last modification:January 28th, 2019 at 10:38 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment