Javaweb表格加载---DataTable

野性酷女 2022-07-12 09:58 279阅读 0赞

> Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 使用 jQuery Datatable 构造数据列表，并且增加或者隐藏相应的列，已达到数据显示要求。同时， jQuery Datatable 强大的功能支持：排序，分页，搜索等。

## datatable引入 ##

*  css : //cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
 *  js : //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
 *  这里申明一下，引入这上面js前提是引入jquery，因为这是基于jquery开发的

## 表格的创建 ##

*  环境准备好之后，我们需要提供一个table的样板。就是给一个table 并命名一个ID，下面是我项目中class样式，你可以不引入只需要一个id

## 参数说明 ##

var  adminTable = $('#adminTable').DataTable({});

*  最后我们只需要在js中向上面那样就行了。只不过想要实现我们想象中的table我们需要对adminTable指定相应的参数。首先需要的就是请求地址的指定
 *  sAjaxSource： 指定我们的请求路径
 *  lengthMenu： 表格中每页的大小，就是下面的效果  
    ![这里写图片描述][SouthEast]
 *  pageLength：当前默认每页显示的数量
 *  oLanguage：这里是一些语言的设置，提示语言的设置，默认是英文的，。

"sProcessing" : "正在加载数据...",
                        "sSearch" : "搜索:",
                        "sLengthMenu" : "_MENU_条记录",
                        "sZeroRecords" : "没有查到记录",
                        "sInfo" : "第 _START_ 条到第 _END_ 条记录,一共 _TOTAL_ 条记录",
                        "sInfoEmpty" : "0条记录",
                        "oPaginate" : 
                        {
                            "sPrevious" : "上一页 ",
                            "sNext" : " 下一页",
                        }

*  还有一些额外的设置，`"bSort" : true, "bProcessing" : true, "bServerSide" : true, "async" : false,`
 *  最后数据显示才是重点。这个放在下面讲解

## 数据匹配显示 ##

*  上面我们已经将表格的请求通过sAjaxSource这个属性指定好了，那么至于数据是如何显示在正确的位置的呢，主要是通过`aoColumns`这个属性匹配的。首先我们看看我们后台发回来的数据长啥样子

![这里写图片描述][SouthEast 1]

*  aaDataa是我们的数据，一看就知道是个list，aaData下表就是所在索引，每个索引里面又有1-7的索引，1-7就是相当于我们表格的7列，所以我们前台table就是遍历aaData将1-7附在对应的列上，datatable也很简单，就是按照顺序赋值的的，所以我们按顺序写列名就行了

[
                            {
                                "sTitle" : "id",
                                "bSortable" : false
                            },
                            {
                                "sTitle" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" id="checkAll" onclick="adminChooseOrNoChoose(this)" /><span></span></label>',
                                "bSortable" : false,
                                "sClass" : "text-center",
                                "fnCreatedCell" : function(nTd, sData, oData,iRow, iCol) 
                                {
                                    var value = oData[0];
                                    var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="testCheckbox" onclick="recordMainId(this)" value="'+value+'" /><span></span></label>';
                                    $(nTd).html(content);
                                }
                            }, {
                                "sTitle" : "用户名",
                                "bSortable" : true,
                                "sClass" : "text-center"
                            }, {
                                "sTitle" : "姓名",
                                "bSortable" : true,
                                "bAutoWidth" : true,
                                "sClass" : "text-center"
                            }, {
                                "sTitle" : "授权人",
                                "bSortable" : false,
                                "sClass" : "text-center"
                            }, {
                                "sTitle" : "已分配角色",
                                "bSortable" : true,
                                "sClass" : "text-center"
                            }, {
                                "sTitle" : "管辖站点",
                                "bSortable" : true,
                                "sClass" : "text-center"
                            }, {
                                "sTitle" : "创建时间",
                                "bSortable" : true,
                                "sClass" : "text-center"
                            }, {
                                "sTitle" : "操作",
                                "bSortable" : true,
                                "sClass" : "text-center"
                            } ]

*  至于每列的设置，大家看名称应该知道是啥意思。但是我们的列并不是仅仅显示数据的。比如有的是要加超链接。有的并不是仅仅显示原始数据，需要进行加工处理的。这里我们需要一个加工函数，上面也提到了。

## 列数据二次加工 ##

fnCreatedCell

*  方法就是多数据进行二次加工。

"fnCreatedCell" : function(nTd, sData, oData,iRow, iCol) 
                                {
                                    var value = oData[0];
                                    var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="testCheckbox" onclick="recordMainId(this)" value="'+value+'" /><span></span></label>';
                                    $(nTd).html(content);
                                }

*  其中值得一说的里面参数就是oData，oData就是所在行的所有列数据的集合数组。很有用的。比如你想去改行的第一列数据，直接oData\[0\]就取到了。在做修改删除很有用。
 *  但是dataTable还通过另外一种方式对数据进行二次处理。就是通过`aoColumnDefs`这个属性来指定具体列的数据加工。

[ { "bSearchable" : true, "bVisible" : false, "aTargets" : [ 0 ]
                            },
                            {
                                "aTargets" : [ 3 ],
                                "mRender" : function(data,type, full) 
                                {
                                    var value=full[0];
                                    return "<a href='' onclick='showUserInfo(\""+value+"\")' data-toggle='modal' data-target='#viewModal'>"+ data+ "</a>"; } }, { "aTargets" : [ 4 ], "mRender" : function(data,type, full) { if(data==null) { data="@@@" } var arr = data.split("@@@"); return "<a href='' data-toggle='modal' data-target='#viewModal' onclick='showUserInfo(\""+ arr[0]+ "\")' >"+ arr[1]+ "</a>"; } }, { "aTargets" : [ 8 ], "mRender" : function(data,type, full) { return "<a href='javascript;;' onclick=' return adminUpdate(this)' site='"+ full[6]+ "' id='"+ full[0]+ "' name='"+ full[2]+ "' data-toggle='modal' data-target='#myModalUpdate'>修改</a>     <a href='' data-toggle='modal' data-target='#deleteModal' onclick='return adminDelete(this)' id='"+full[0]+"' role='"+ full[5]+ "'>删除</a>"; } } ]

*  这种方法缺陷就是需要我们指定列号，但是实际开发中我们的列号可能是会因为项目需求而改变的，所以这个方法不是很好，但是也能实现同样的效果。然后通过`mRender`指定函数时间，里面的full和oData是一个数据效果。
 *  到这里数据显示及一些CURD操作基本就实现了。但是有的时候我们需要将表格加载数据是携带参数查询，这个时候我们除了在指定的请求上加，还有一种方法是在数据回调是处理的。通过`fnServerData`属性，我们可以加条件参数传入后台。

// 服务器端，数据回调处理 
                    "fnServerData" : function retrieveData(sSource, aoData, fnCallback) { 
                        aoData.push({
                            "name" : "user_name",
                            "value" : $('#user_name').val()
                        });
                        aoData.push({
                            "name" : "real_name",
                            "value" : $('#real_name').val()
                        });
                        aoData.push({
                            "name" : "create_user_name",
                            "value" : $(
                                    '#create_user_name').val()
                        });
                        aoData.push({
                            "name" : "site_id",
                            "value" : $('#site_id').val()
                        });
                        aoData.push({
                            "name" : "fromTime",
                            "value" : $('#fromTime').val()
                        });
                        aoData.push({
                            "name" : "toTime",
                            "value" : $('#toTime').val()
                        });
                        $.ajax({
                            "type" : "POST",
                            "url" : sSource,
                            "dataType" : "json",
                            "contentType" : "application/json",
                            "data" : JSON.stringify(aoData),
                            "success" : function(data) { 
                                fnCallback(data);
                            }
                        });
                    }

*  条件参数通过aoData.push方法加入。到这里前台table已经显示完了。我们在看看后台数据处理逻辑。

## 后台参数接收 ##

*  前台我们指定的请求我们在后台对应的请求中加入如下参数。

![这里写图片描述][SouthEast 2]

*  前台中的aoData.push进来的参数及datatable自身关于分页等等的信息数据全是放在dataTableParams这个变量中。我们只需要将他转换成map就可以传入数据库操作了。

转map代码：

HashMap<String, String> paramsMap = new HashMap<>();
            for (DataTableParam dataTableParam : dataTableParams) 
            {
                paramsMap.put(dataTableParam.getName(), dataTableParam.getValue());
            }

*  下面的操作我就不在细致说了，下面就是传入数据sql的操作了。

## 表格刷新 ##

*  在实际中我们都需要不刷新页面只刷新页面中某个空间。datatable基于此需求专门提供了刷新表格的方法。在实际开发中我们改变了表中数据最后我们调用刷新的方法就行了

adminTable.draw();

## 使用dataTable常见问题汇总 ##

![这里写图片描述][SouthEast 3]

*  这个问题基本上就是数据不匹配，这是因为我在前台`aoColumns`中指定了7列，但是我们后台只穿回来6列的原因，只要少于7列都是这种错误。修改方法：去后台添加完整数据。就算某列时空也要加入，加入空字符串代替，因为前台是按顺序的加载数据的，所以没数据也要用空字符串占替位置。

dataTable发展的版本很多，不同的版本里面的参数名可能不太一样，需要注意一下，有的版本加载table的请求地址是通过ajax属性来实现的。有的就是sAjaxSource属性实现的，只是名称不一样了而已。

## 完整DataTable加载样本 ##

[SouthEast]: /images/20220710/257bacf4b6a646e69db3590eee7a0011.png
[SouthEast 1]: /images/20220710/a1c0ad83fe584508b89c904e86c7b587.png
[SouthEast 2]: /images/20220710/a6c5d7ba603d45f582ac68631ef41e6a.png
[SouthEast 3]: /images/20220710/9fc43199c0aa4ba2afdd635aaedf89d5.png