bootstrap插件 DataTable 的简单使用

最新推荐文章于 2022-12-28 18:00:00 发布

dhrnjt3313

最新推荐文章于 2022-12-28 18:00:00 发布

阅读量387

点赞数

文章标签： javascript json c# ViewUI

原文链接：http://www.cnblogs.com/condon/p/7249717.html

版权

最近开发项目时，前后端分离，寻找合适的框架，然后用到了这个DataTable插件，下面简单介绍下基础使用。

1、这款插件还是很强大的，分页，搜索等都很好用，我用的是获取全部数据源，让他进行分页，也可以传参进行后台分页。

头部要引用：

 <link href="../../Scripts/jquery.dataTables.min.css" rel="stylesheet" />
 <script src="../../Scripts/jquery-1.10.2.js"></script>
 <script src="../../Scripts/jquery.dataTables.min.js"></script>

2、主体代码

 <table id="MissionTable" class="table table-striped table-bordered" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                            </th>
                            <th>
                                编号
                            </th>
                            <th>
                                名称
                            </th>
                            <th>
                                发起时间
                            </th>
                            <th>
                                状态
                            </th>
                            <th>
                                发起人
                            </th>
                            <th style="width: 100px; ">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

3、js代码

-------------------------------------------------------------------------

　　静态数据源demo代码

var  dataObj = [{    //数据源
                "ID": "001",
                "Code": "TM01",
                "Name": "作业任务001",
                "Time": "2017-02-03",
                "State": "编辑",
                "User": "张三",
            },
         {
             "ID": "001",
             "Code": "TM01",
             "Name": "作业任务001",
             "Time": "2017-02-03",
             "State": "编辑",
             "User": "张三",
         },
         {
             "ID": "001",
             "Code": "TM01",
             "Name": "作业任务001",
             "Time": "2017-02-03",
             "State": "编辑",
             "User": "张三",
         }]

  SetDatable(dataObj)

function SetDatable(dt) {
            var table = $('#MissionTable').DataTable({
                "lengthChange": false,  //是否显示选择显示条数 
                data: dt,
                columns: [
                      { "data": "ID", "defaultContent": "" },
                      { "data": "Code", "defaultContent": "" },
                      { "data": 'Name', "defaultContent": "" },
                      { "data": "Time", "defaultContent": "" },
                      { "data": "State", "defaultContent": "" },
                      { "data": "User", "defaultContent": "" },
                      {
                          "data": null, "title": "操作", "defaultContent"
                          : "<button class='btn btn-danger btn-xs  delete-btn' style='margin-right:5px' type='button'>终止</button><button class='btn    btn-default  btn-xs  info-btn' type='button'>详情</button>   <button class='btn-xs' type='button'><em class='glyphicon glyphicon-remove'></em></button> <button class='btn-xs' type='button' οnclick='goto()'><em class='glyphicon glyphicon-edit'></em></button>"
                      }
                
                ], 
                //"paging": false,  //是否启用分页
                scrollCollapse: true,
                // "jQueryUI": true,  //是否启用jqui 样式
                //"stripeClasses": ['success', 'info'],  //table 行 间隔样式，可在后面逗号添加
                "columnDefs": [
                {
                    "targets": [0],
                    "visible": false,
                    "searchable": false,
                }
                ],
                //  文字汉化
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    }
                },
            })
            //编辑事件
            $("#MissionTable tbody").on("click", ".edit-btn", function () {
                var tds = $(this).parents("tr").children();
                $.each(tds, function (i, val) {
                    var jqob = $(val);
                    if (i < 1 || jqob.has('button').length) { return true; }//跳过第1项 序号,按钮
                    var txt = jqob.text();
                    var put = $("<input type='text'>");
                    put.val(txt);
                    jqob.html(put);
                });
                $(this).html("保存");
                $(this).toggleClass("edit-btn");
                $(this).toggleClass("save-btn");
            });
            //删除事件
            $("#MissionTable tbody").on("click", ".delete-btn", function () {
                var data = table.row($(this).parents('tr')).data();
                var ID = data.ID;
                $("#myModal1").modal();
                $('#mid').val(ID);
            });
            //详情事件
            $("#MissionTable tbody").on("click", ".info-btn", function () {
                var data = table.row($(this).parents('tr')).data();
                var ID = data.ID;
                window.location.href = 'MissionEdit.html?ID=' + ID;
            });
            //编辑保存事件
            $("#MissionTable tbody").on("click", ".save-btn", function () {
                var row = table.row($(this).parents("tr"));
                var tds = $(this).parents("tr").children();
                $.each(tds, function (i, val) {
                    var jqob = $(val);
                    //把input变为字符串
                    if (!jqob.has('button').length) {
                        var txt = jqob.children("input").val();
                        jqob.html(txt);
                        table.cell(jqob).data(txt);//修改DataTables对象的数据
                    }
                });
                var data = row.data();
                $.ajax({
                    url: "http://localhost:63198/api/Edit",  //快速编辑行保存
                    data: data,
                    type: "post",
                    error: function () {
                        alert("服务器未正常响应，请重试");
                    },
                    success: function (response) {
                        alert(response);
                    }
                });
                $(this).html("编辑");
                $(this).toggleClass("edit-btn");
                $(this).toggleClass("save-btn");
            });
        }

---------------------------------------------

　　2、动态数据源请求。C# .NEtT;

　　　　此处用的webapi

        [Route("api/GetTaskList")]
        [HttpGet]
        public IHttpActionResult GetTaskList()
        {
            DataSet ds = CommonComponentBLL.CommonComponent.GetTaskList1();
            return Json(GetJsonByDataset(ds));
        }


        //转json
        public static string GetJsonByDataset(DataSet ds)
        {
            if (ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0)
            {
                //如果查询到的数据为空则返回标记ok:false
                return "{\"data\":false}";
            }
            StringBuilder sb = new StringBuilder();

            // sb.Append("{\"JobFiles\":true,");
            foreach (DataTable dt in ds.Tables)
            {
                sb.Append(string.Format("["));

                foreach (DataRow dr in dt.Rows)
                {
                    sb.Append("{");
                    for (int i = 0; i < dr.Table.Columns.Count; i++)
                    {
                        sb.AppendFormat("\"{0}\":\"{1}\",", dr.Table.Columns[i].ColumnName.Replace("\"", "\\\"").Replace("\'", "\\\'"), ObjToStr(dr[i]).Replace("\"", "\\\"").Replace("\'", "\\\'")).Replace(Convert.ToString((char)13), "\\r\\n").Replace(Convert.ToString((char)10), "\\r\\n");
                    }
                    sb.Remove(sb.ToString().LastIndexOf(','), 1);
                    sb.Append("},");
                }

                sb.Remove(sb.ToString().LastIndexOf(','), 1);
                sb.Append("],");
            }
            sb.Remove(sb.ToString().LastIndexOf(','), 1);
            // sb.Append("}");
            return sb.ToString();
        }

转载于:https://www.cnblogs.com/condon/p/7249717.html

dhrnjt3313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap插件 DataTable 的简单使用

最近开发项目时，前后端分离，寻找合适的框架，然后用到了这个DataTable插件，下面简单介绍下基础使用。1、这款插件还是很强大的，分页，搜索等都很好用，我用的是获取全部数据源，让他进行分页，也可以传参进行后台分页。头部要引用： <link href="../../Scripts/jquery.dataTables.min.css" rel="styleshe...
复制链接

扫一扫