DataTables 用法積累

 function loadData() {
            var areaTable = $('#area').dataTable({
                "autoWidth": false,
                "scrollY": "380px",//樹形滾動條
                "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 onclick='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,&quot;desc&quot;]]">

排序後端接收數據:

            //獲取客戶端需要那一列排序
            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);
            } 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章