关于jQuery插件中datatables的学习

先放几个相关的参考文档的连接

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