DataTables 用法积累

最新推荐文章于 2024-08-10 07:04:27 发布

独自等待你

最新推荐文章于 2024-08-10 07:04:27 发布

阅读量1k

点赞数

分类专栏： js脚本

本文链接：https://blog.csdn.net/anewboyz/article/details/81128499

版权

js脚本专栏收录该内容

17 篇文章 0 订阅

订阅专栏

function loadData() {
            var areaTable = $('#area').dataTable({
                "autoWidth": false,
                "scrollY": "380px",//树形滚动条
  "ordering": false, // 禁止排序
                "scrollCollapse": true,
                "destroy": true, //Cannot reinitialise DataTable,解决重新加载表格内容问题，可以重复调用loadData()
                "ajax": {
                    "url": "/baidu/getdata",
                    "data": function (data) {
                        //添加额外的参数传给服务器
                        data.inputDept = $("#inputDept option:selected").val();
                        data.date1 = $("#date1").val();
                        data.date2 = $("#date2").val();
                        data.addArea = $("#addArea").val();
                        data.personName = $("#txt_personName").val();
                        data.customerName = $("#txt_userName").val();
                        data.mobile = $("#txt_mobile").val();

                        return JSON.stringify(data);//指定json格式,如果不指定默认为 name=aa$userid=124&sex=1 这样的格式
                    },
                    "dataSrc": function(json){ //服务端返回错误数据在绑定之前处理
                        if (json.Status == 0) {
                            layer.alert(json.Message, {title:'错误信息',icon:5});
                            return false;
                        }
                        return json.data;
                    }
                },
                "fnDrawCallback": function (oSettings) {

                    var json = jQuery.parseJSON(oSettings.jqXHR.responseText);//获取后台方式直接可以拿到json 之后进行处理只能拿到成功以后的数据

                },

                "columnDefs": [
                    {
                        "targets": 0,
                        "width": "50px",
                        render: function (data, type, full, meta) {
                            return '' + full.TableID + '';
                        }

                    },
                    {
                        "targets": 11,
                        "width": "50px",
                        render: function (data, type, full, meta) {
                            var statusHtml = "";
                            statusHtml = "<span οnclick='openDiv(500,500,\"/c.html?id=" + full.TableID +"\",\"详细信息\",\"\")' >详情 <i class='glyphicon glyphicon-list-alt text-success' ></i></span>";

                            return statusHtml;
                        }
                    },
                    {
                    }
                ]
            });

            SearchGo = function () {
                areaTable.api().ajax.reload();
            }
            CurrentPageRefresh = function () {
                areaTable.api().ajax.reload(null, false); //刷新表格数据，分页信息不会重置
            }

}

标题排序设置：
<table id="area" class="table table-striped table-bordered" data-page-length="10" data-order="[[0,"desc"]]">

排序后端接收数据：

//获取客户端需要那一列排序
string orderColumn = "0";
//获取排序方式默认为asc
string orderDir = "asc";
//定义列名，顺序要和表头顺序一致，不需要排序的可以空出来，但是必须要有，占一个索引位置
string[] cols = { "TableID", "CustomerName", "mobile", "YiXiang", "AddArea", "personid","","", "CreateDate" };

var jsonOrderItems = JsonConvert.DeserializeObject<List<OrderModel>>(obj["order"].ToString().Trim(new char[] { '"' }));
orderColumn = jsonOrderItems[0].column;
orderColumn = cols[int.Parse(orderColumn)];
orderDir = jsonOrderItems[0].dir;

List<int> OrderFilter = new List<int>();

if (orderDir == "asc")
{
OtherCustomerInputInfo.Fields fields = (OtherCustomerInputInfo.Fields)Enum.Parse(typeof(OtherCustomerInputInfo.Fields), orderColumn, true);
BLLLogicHelper.OtherCustomerInputLogic.EnumToOrderByEnum(OrderFilter, fields, SortingAction.Asc);
}
else
{
OtherCustomerInputInfo.Fields fields = (OtherCustomerInputInfo.Fields)Enum.Parse(typeof(OtherCustomerInputInfo.Fields), orderColumn, true);
BLLLogicHelper.OtherCustomerInputLogic.EnumToOrderByEnum(OrderFilter, fields, SortingAction.Desc);
}