亚洲国产天堂嫩草影院,国产jizz在线观看,菠萝视频高清视频6

datatable.js 服務(wù)端分頁(yè)+fixColumns列固定

2021-7-30 前端達(dá)人

前言

記得還是15年的時(shí)候，工作需要，獨(dú)自寫(xiě)后臺(tái)管理系統(tǒng)。。記得那時(shí)候，最讓我頭疼的不是后臺(tái)邏輯，而是數(shù)據(jù)的列表展示。列很多的時(shí)候,頁(yè)面顯示問(wèn)題;分頁(yè)樣式問(wèn)題;表格樣式問(wèn)題;數(shù)據(jù)加載...很多細(xì)節(jié)的問(wèn)題，費(fèi)時(shí)，而且總是達(dá)不到我想要的效果...也是那個(gè)時(shí)候，第一次接觸了datatable.js插件,只需要簡(jiǎn)單的修改配置值，就可以改變表格的方方面面,真的是非常好的體驗(yàn)。。。

不過(guò)，因?yàn)橐恍v史原因，和時(shí)間問(wèn)題，那時(shí)候?qū)?ajax加載+服務(wù)端分頁(yè)+頁(yè)面刷新,仍然是一直很迷迷糊糊...剛好最近工作中需要做一個(gè)列表管理頁(yè),所以就很自然的選擇了datatable.js,并且總算把 ajax加載數(shù)據(jù)+服務(wù)端分頁(yè)+reload這套流程弄通。也許還有很多種方案可以達(dá)到效果，但至少這個(gè)是肯定可行的.

樣式是基于bootstrap風(fēng)格.

正文

一.前端

需要引的js文件

<!-- datatables樣式和bootstrap支持樣式 --> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!--form ajax提交--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.js"></script>

html部分

<!-- search 框start --> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="用戶姓名" name="userName" id="searchUserName"> </div> & <div class="form-group"> <input type="text" class="form-control" placeholder="律所名" name="officeName" id="searchOfficeName"> </div> & <div class="form-group"> <input type="number" class="form-control" placeholder="狀態(tài)" name="be_valid" id="searchValid"> </div> <button type="button" class="btn btn-success" onclick="searchData()">搜索</button> </form> <form class="navbar-form navbar-right"> <button type="button" class="btn btn-primary btn-sm btn-warning" data-toggle="modal" data-target="#addModal"> 新增律所 </button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <!-- search 框end --> <div class="container"> <table id="mytable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" style="white-space: nowrap;"> <thead> <tr> <th>用戶名</th> <th>用戶ID</th> <th>郵箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所簡(jiǎn)報(bào)</th> <th>律所創(chuàng)建時(shí)間</th> <th>限制人數(shù)</th> <th>驗(yàn)證碼</th> <th>狀態(tài)</th> <th>備注信息</th> <th>操作</th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <th>用戶名</th> <th>用戶ID</th> <th>郵箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所簡(jiǎn)報(bào)</th> <th>律所創(chuàng)建時(shí)間</th> <th>限制人數(shù)</th> <th>驗(yàn)證碼</th> <th>狀態(tài)</th> <th>備注信息</th> <th>操作</th> </tr> </tfoot> </table> </div>

因?yàn)槭欠?wù)端分頁(yè),所以我頁(yè)面做了搜索框,進(jìn)行自定義的參數(shù)搜索.

js部分

<script type="text/javascript"> var oTable;
    $(function(){ LoadData();
    }); function searchData(){
        oTable.draw(true); // oTable.ajax.reload(null,true);  }function LoadData() {
         oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip',  oLanguage: {
                sZeroRecords: "對(duì)不起，查詢不到任何相關(guān)數(shù)據(jù)",
                sInfoEmpty: "記錄數(shù)為0" },
            sScrollX: "100%",
            sScrollXInner: "110%",
            bScrollCollapse: false, //可滾動(dòng) bDestory: true, //數(shù)據(jù)允許清空 bServerSide: true, //服務(wù)端處理分頁(yè) bLengthChange: false, //是否允許自定義每頁(yè)顯示條數(shù). iDisplayLength: 20, //每頁(yè)顯示10條記錄 bPaginate: true, //是否分頁(yè) //sPaginationType: "amaze", //分頁(yè)樣式   "full_numbers" //bJQueryUI: true,//是否將分頁(yè)樣式應(yīng)用到表格 bProcessing: true, //當(dāng)datatable獲取數(shù)據(jù)時(shí)候是否顯示正在處理提示信息。 bFilter: false, //是否啟用條件查詢 bSearchable: false, //bStorable: false,//是否啟用列排序 //bInfo: true, //是否顯示分頁(yè)信息(頁(yè)腳信息) order: [[7, "desc"]], //默認(rèn)按照第幾列排序,從1開(kāi)始 bAutoWidth: false, //自動(dòng)寬度 bStateSave: true, //狀態(tài)保存，使用了翻頁(yè)或者改變了每頁(yè)顯示數(shù)據(jù)數(shù)量，會(huì)保存在cookie中，下回訪問(wèn)時(shí)會(huì)顯示上一次關(guān)閉頁(yè)面時(shí)的內(nèi)容  ajax:{
                 dataType:'json',
                 type:'POST',
                 url: '/adminUserList',
                 headers: { 'token': window.localStorage.token //取localStorage中的token，用來(lái)做安全校驗(yàn)
                 },
                 dataSrc: "aaData",
                 data:function(d){
　　　　　　　　　　　　　//取搜索的參數(shù)值,在請(qǐng)求服務(wù)端時(shí),附加到請(qǐng)求參數(shù)中 var userName=$('#searchUserName').val(); var officeName=$('#searchOfficeName').val(); var be_valid=$('#searchValid').val();

                     d.userName=userName;
                     d.officeName=officeName;
                     d.be_valid=be_valid;
                 }
             },
            columns: [
                {
                    data: "name",
                    bSortable: false },
                {
                    data: "user_id",
                    bSortable: false },
                {
                    data: "email",
                    bSortable: false },
                {
                    data: "level_name",
                    bSortable: false },
                {
                    data: "office_name",
                    bSortable: false },
                {
                    data: "office_id",
                    bSortable: false },
                {
                    data: "officeBriefing",
                    bSortable: false },
                {   data: "office_create_time"},
                {
                    data: "limited_num",
                    bSortable: false },
                {
                    data: "verify_code",
                    bSortable: false },
                {
                    data: "be_valid",
                    bSortable: false },
                {
                    data: "remark",
                    bSortable: false },
                {
                    data: null,
                    render: function (data, type, row) { return '<button type="button" class="btn btn-primary btn-sm" onclick="editShow(\''+data.user_id+'\')">編輯</button>'; },
                    bSortable: false }
            ]
        });

    } </script>

二.后端

java服務(wù)端代碼

@ResponseBody
    @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList(
            @ApiParam(required = true, name = "start", value = "開(kāi)始條數(shù)") @RequestParam Integer start,
            @ApiParam(required = true, name = "length", value = "取多少條") @RequestParam Integer length,
            @ApiParam(required = true, name = "userName", value = "用戶名") @RequestParam String userName,
            @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName,
            @ApiParam(required = true, name = "be_valid", value = "狀態(tài)") @RequestParam Integer be_valid,
            HttpServletRequest request) throws Exception{// Map<String,String[]> paramMap=request.getParameterMap();  String[] orderTypeArr=request.getParameterValues("order[0][dir]");
        String lawOfficeOrderType=""; if(null!=orderTypeArr){
            lawOfficeOrderType=orderTypeArr[0];
        }

        AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相關(guān)參數(shù) String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){
            responseDTO.setSEcho(Integer.parseInt(drawStrArr[0]));
        }

        Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超級(jí)管理員");

        responseDTO.setITotalRecords((int) Math.ceil(appUserShowDTOPage.getTotal()));//實(shí)際需要傳數(shù)據(jù)總數(shù),此處值不對(duì)
        responseDTO.setITotalDisplayRecords((int) Math.ceil(appUserShowDTOPage.getTotal()));
        responseDTO.setAaData(appUserShowDTOPage.getResult()); return responseDTO;
    }

start(起始條數(shù),注意，是條數(shù)而不是頁(yè)數(shù) )和length(取多少條數(shù)據(jù))為datatable默認(rèn)會(huì)傳到服務(wù)端的2個(gè)參數(shù), userName/officeName/be_valid則為我前端自定義的附加參數(shù)。

Page是List<T>泛型集合,是開(kāi)源項(xiàng)目PageHelper-mybatis中的類。

服務(wù)端返回給前端的json數(shù)據(jù)也有格式要求，具體見(jiàn)AjaxListResponseDTO類定義.

/** * Created by xinhuiyang on 2017/6/9. */ @Data public class AjaxListResponseDTO<T>{ private Integer sEcho; private Integer iTotalRecords; private Integer iTotalDisplayRecords; private List<T> aaData;
}

自此,就實(shí)現(xiàn)了帶搜索功能的服務(wù)端分頁(yè)效果.

三. FixColumn（固定第一列和最后一列效果）

首先,在之前的基礎(chǔ)上,需要添加一個(gè)js文件引用

<!-- 固定列 插件js -->
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>

其次,在配置項(xiàng)中添加一項(xiàng):

oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip',  oLanguage: {
                sZeroRecords: "對(duì)不起，查詢不到任何相關(guān)數(shù)據(jù)",
                sInfoEmpty: "記錄數(shù)為0" },
            sScrollX: "100%",
            sScrollXInner: "110%",
            bScrollCollapse: false, 
            fixedColumns: { //固定列的配置項(xiàng) leftColumns: 1, //固定左邊第一列 rightColumns:1 //固定右邊第一列  },
            bDestory: true, 
            bServerSide: true, 
            .....省略......

然后，刷新頁(yè)面...至此，固定列效果就ok了。

后言

現(xiàn)在的頁(yè)面效果，還有2個(gè)瑕疵:

其一是后臺(tái)返回"總條數(shù)"不對(duì),我是時(shí)間趕,來(lái)不及寫(xiě)查詢了..大家實(shí)際使用時(shí),自己查詢一下就行,這個(gè)好解決;

其二是前端頁(yè)面，下角顯示頁(yè)碼總數(shù)和頁(yè)腳信息顯示有問(wèn)題(見(jiàn)下圖),不知道當(dāng)后臺(tái)"總條數(shù)"準(zhǔn)確時(shí)，會(huì)不會(huì)就ok了。我后面還會(huì)找個(gè)時(shí)間，去修復(fù)一下的...當(dāng)我有解決方案時(shí),會(huì)補(bǔ)充在下面的,大家有知道原因和解決方案的，也歡迎評(píng)論在下方。

頁(yè)腳圖

1.左邊數(shù)字沒(méi)顯示出來(lái).

2.實(shí)際83條數(shù)據(jù),每頁(yè)20條,應(yīng)該最多到5頁(yè)的，但實(shí)際上,可以點(diǎn)任意頁(yè)，只不過(guò)從第6頁(yè)開(kāi)始，數(shù)據(jù)都為空.

補(bǔ)充

頁(yè)面顯示不對(duì)的問(wèn)題已經(jīng)找到原因并且解決.

原因是：后端分頁(yè)時(shí),需要返回給前端更多的信息,如總數(shù)多少，過(guò)濾后多少等,所以我代碼中的AjaxListResponseDTO類就不符合后端分頁(yè)時(shí)的需求了，需要改動(dòng).

修改后的類定義為：

/** * Created by xinhuiyang on 2017/6/9. */ @Data
@ApiModel public class AjaxListResponseDTO<T>{

    @ApiModelProperty("必要。上面提到了，Datatables發(fā)送的draw是多少那么服務(wù)器就返回多少。 這里注" +
            "意，作者出于安全的考慮，強(qiáng)烈要求把這個(gè)轉(zhuǎn)換為整形，即數(shù)字后再" +
            "返回，而不是純粹的接受然后返回，這是 為了防止跨站腳本（XSS）攻擊。") private Integer draw;

    @ApiModelProperty("必要。即沒(méi)有過(guò)濾的記錄數(shù)（數(shù)據(jù)庫(kù)里總共記錄數(shù)）") private Integer recordsTotal;

    @ApiModelProperty("必要。過(guò)濾后的記錄數(shù)（如果有接收到前臺(tái)的過(guò)濾條件，則返回的是過(guò)濾后的記錄數(shù)）") private Integer recordsFiltered;

    @ApiModelProperty("必要。表中中需要顯示的數(shù)據(jù)。這是一個(gè)對(duì)象數(shù)組，也可以只是" +
            "數(shù)組，區(qū)別在于 純數(shù)組前臺(tái)就不需要用 columns綁定數(shù)據(jù)，會(huì)自動(dòng)按照順序" +
            "去顯示 ，而對(duì)象數(shù)組則需要使用 columns綁定數(shù)據(jù)才能正常顯示。") private List<T> aaData;

    @ApiModelProperty("可選。你可以定義一個(gè)錯(cuò)誤來(lái)描述服務(wù)器出了問(wèn)題后的友好提示") private String error;
}

相應(yīng)的，controller部分代碼,也要給對(duì)應(yīng)的屬性附上正確的值,改動(dòng)后代碼如下：

 @ResponseBody
    @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList(
            @ApiParam(required = true, name = "start", value = "開(kāi)始條數(shù)") @RequestParam Integer start,
            @ApiParam(required = true, name = "length", value = "取多少條") @RequestParam Integer length,
            @ApiParam(required = true, name = "userName", value = "用戶名") @RequestParam String userName,
            @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName,
            @ApiParam(required = true, name = "be_valid", value = "狀態(tài)") @RequestParam Integer be_valid,
            HttpServletRequest request) throws Exception{ // Map<String,String[]> paramMap=request.getParameterMap();  String[] orderTypeArr=request.getParameterValues("order[0][dir]");
        String lawOfficeOrderType=""; if(null!=orderTypeArr){
            lawOfficeOrderType=orderTypeArr[0];
        }

        AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相關(guān)參數(shù) String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){
            responseDTO.setDraw(Integer.parseInt(drawStrArr[0]));
        } int totalCountBeforeFilter=authUserService.countUserByLevel("超級(jí)管理員");

        Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超級(jí)管理員");

        responseDTO.setAaData(appUserShowDTOPage.getResult());
        responseDTO.setRecordsTotal(totalCountBeforeFilter);
        responseDTO.setRecordsFiltered((int) appUserShowDTOPage.getTotal()); return responseDTO;
    }