先放幾個相關的參考文件的連線

http://datatables.club/

http://datatables.club/reference/

一般來說學習先參考這些相關的文件這也是給我自己備註一下，不然老是忘記。建議還是看應為原文的問檔或者api，因為畢竟翻譯過的和自己理解的有時候會有出入

function initTable() {
  table = $('#deviceList').DataTable({
         "advancedSearching": true,//控制控制元件的搜尋功能,如果為false,控制元件的搜尋功能被完全禁用
         "ordering": false,
         "lengthMenu" : [ pageSize ],//	定義頁面長度元件裡面的選項.
         "buttons": [ //在整個table上方增加按鈕
                       { "text": " 新增", "className": "bui-add",
                         "action": function (e, dt, node, config) {
                          openAddView();
                          }
                       }
                    ],
                        ajax : function(data, callback, settings) {
                        //ajax請求裡面是個函式通過回撥函式callback給下面的column賦值渲染
                        //封裝請求引數
                            $.ajax({
                                url : "web/base/device/query",
                                data : getParams(data), //傳入已封裝的引數
                                success : function( result) {
                                    if (result.state==200) {
                                        callback(result);
                                    } else {
                                        callback(null);
                                    }
                                }
                            });
                        },
                        "columns" : [//data的名字和你返回引數裡面json裡的名字相對應，title相當於th，表頭這樣子的，class代表樣式。
                            {"data" : "deviceNo", "title" : "裝置編號", "class": "text-center", "width": 100},
                            {"data" : "status", "class": "text-center", "width": 100, "title" : "裝置狀態", "render" : function (data, type, row) {//可以在渲染後回撥根據需要輸出不同的值。
                                if(data=='1'){
                                    data="在用";
                                }else {
                                    data="報廢";
                                }
                                return  data;
                            }
                            },

                            {
                                "orderable": false,//是否允許此列排序，預設是可以的
                                "width": 100,
                                "title": "操作",
                                "class": "text-center",
                                "render": function (data, type, row) {
                                    var movies = [//操作列陣列 NoDataTitle,list,必選,可為空值
                                        {
                                            "NoDataTitle": "暫無可用操作",
                                            "list": [ //操作專案 可為空
                                                {
                                                    "title": "編輯", "attributes": {"name": "data-bind-edit"}
                                                },
                                                {
                                                    "title": "刪除", "attributes": {"name": "data-bind-del"}
                                                }
                                            ]
                                        }
                                    ];
                                    return table.rows().operating(movies);//rows()獲取多行的物件單行就row，operating是前端自己封裝跟datatable沒關係的方法。
                                }
                            }]
                    }).on('click', '[data-bind-edit]', function() {
                       //通過on的方式去繫結上面的事件
                        var index = $('[data-bind-edit]').index($(this));
                        rowEditClick(index);
                    }).on('click', '[data-bind-del]', function() {
                        var index = $('[data-bind-del]').index($(this));
                        rowDelClick(index);
                    });

                }
function getParams(data) {
                    var p = {};

                    p.pageNo = table ? table.page() + 1 : pageNo;
                    p.pageSize = data.length;

                    p.deviceName = $('#search_deviceName').val();
                    p.deviceNo = $('#search_deviceNo').val();
                   // p.parentId = parentId;
                    return p;
                }
 

關於一些table的引數說明我這裡就不復制貼上了

這裡也貼一個連結裡面寫的很詳細了https://www.cnblogs.com/hyywaq/p/5919412.html