datatables跳轉自定義頁面（後端分頁）

在後端分頁的狀況下，怎麼作到跳轉自定義頁面？

0x01 難點：

一. 怎麼添加自定義代碼？

前提：datatables在整個html加載完畢後，進行datatables數據的渲染，而且把右下角的 「上頁 頁碼 下頁」 加載出來。

問題：所以，在script中的選擇器能定位到 "id=dynamic-table_paginate" 的div元素(datatables 右下角頁碼跳轉部分，下稱 「跳轉DIV」) ，但此時該元素內容並未被datatables填充；即便將自定義代碼append填充入該元素，也會在以後datatables填充時被去除掉。

若是在「跳轉DIV」後添加同級元素，因CSS關聯了DIV的內容，因此十分難調整。

 

解決方法：

採用fnDrawCallback：在HTML加載完畢，且datatables渲染完畢後執行，此刻可以「跳轉DIV」標籤已加載渲染完畢，可以在其中填充代碼了。

選擇在"跳轉DIV"子元素的ul標籤後添加自定義元素代碼（即 class="my_dataTables_jump"部分）

 

二. 表單數據渲染後，「跳轉DIV」部分的頁數怎麼改變？

頁數也即 <ul class="nagination">部分的頁碼怎麼修改？

網上查了許多資料，用table.api().page().draw(false)；可是報錯沒有api()函數，也沒法理解。

另外一方面，本身寫js去修改也不可取，工做量大重複造輪。

解決方法：

這裏使用page()函數，參考官方文檔：https://datatables.net/reference/api/page()

table.page( 想要跳轉的頁碼減一 ).draw( 'page' );

//因採用索引值，因此要減一；draw('page')，參數 'page' 字符串爲參數，不是僞代碼之類。

關於page()中的draw('page')，爲何draw而且其中傳入參數 'page'，參考官方文檔  https://datatables.net/reference/api/draw()

 

因此跳轉時，取跳轉框中的值，和最小最大頁碼值進行條件判斷，使用table.page(跳轉頁面).draw('page') 進行跳轉。

 

0x02 代碼

後端部分代碼不變

前端部分 HTML CSS JS：

/*
*
* HTML部分
*
* */

<textarea id="jump_page_html" style="display:none">
    <div class="my_dataTables_jump">
        <span class="btn">
            跳轉
        </span>
        <input type='text' id='jump_page_space' class='btn'>
        <button type="button" id="jump_page_button" class="jump_button btn">確認</button>
    </div>
</textarea>

/*
*
*   CSS部分
*
* */

.jump_button{
    width: 54px;
    height: 33px;
    color: #fff;
    background: #65CEA7;
}

.my_dataTables_jump{
    display:inline-block;
    float:right;
    margin-top:15px;
    position: relative;
    top:4px;
    left:4px;
}
.my_dataTables_jump span{
    width: 54px;
    height: 33px;
    border:1px solid #EFF2F7;
    background-color: #EFF2F7;
    color:#535351;
    cursor: auto;
}
.my_dataTables_jump span:hover{
    color:#535351;
}
.my_dataTables_jump input{
    height:34px;
    width: 65px;
    border:1px solid #EFF2F7;
    background-color: #EFF2F7;
}

/*
*
*   javascript部分
*
* */

var table = $("#dynamic-table").dataTable({
    language:lang,  //提示信息
    autoWidth: false,  //禁用自動調整列寬
    stripeClasses: ["odd", "even"],  //爲奇偶行加上樣式，兼容不支持CSS僞類的場合
    processing: true,  //隱藏加載提示,自行處理
    serverSide: true,  //啓用服務器端分頁
    searching: false,  //禁用原生搜索
    orderMulti: false,  //啓用多列排序
    order: [],  //取消默認排序查詢,不然複選框一列會出現小箭頭
    renderer: "bootstrap",  //渲染樣式：Bootstrap和jquery-ui
    pagingType: "simple_numbers",  //分頁樣式：simple,simple_numbers,full,full_numbers
    columnDefs: [{
        "targets": 'nosort',  //列的樣式名
        "orderable": false    //包含上樣式名‘nosort’的禁止排序
    }],
    // 添加自定義跳轉 "fnDrawCallback": function () {
        var jump_page = $('#jump_page_html').text(); //選擇textarea中預存的代碼
        $("#dynamic-table_paginate").append(jump_page); 
        $("#jump_page_button").click(function(){ jump_page_action(); }); },
    ajax: function (data, callback, settings) {

        //自定義跳轉頁碼

        var jump_page = $('#jump_page_space').val(); 
        if(jump_page){
            param.start = (jump_page-1)*param.limit; //將跳轉頁碼傳入封裝數據給後端
        }

        $.ajax({
            ....................

            data: param,  //傳入組裝的參數

            ....................

        })

　　    //***
　　    //如下省略，不是本篇關注點

    },
})

//跳轉函數——頁碼修改、表單數據重構-即重發ajax進行渲染

function jump_page_action(){
    var page = parseInt($('#jump_page_space').val());//要轉整形
    var page_num = parseInt($('#dynamic-table_next').prev().children('a').text()); //選取「下一頁」 前一個元素的值，也就是最大頁數
    if(page >= 1 && page <= page_num) {  //跳轉的頁數在可選範圍中（大於等於1，小於等於最大頁）
        table.page(page - 1).draw('page'); //
    }
}

 

0X03

在另外一個新項目中，table.page(page - 1).draw('page') 沒法跳轉頁面。

使用 table.page(page-1).draw(false) 才能跳轉頁面。思考緣由，多是上面一個項目用datatables1.9，而這一個使用datatables1.10，二者的api有所區別。

蛋疼的是，找不到1.9的文檔，彷佛版本更新後原有文檔都沒了，無法肯定是不是1.9與1.10的版本區別問題。

//添加跳轉html元素，做爲datatables渲染時的參數
"fnDrawCallback": function () {
    var jump_page = $('#jump_page_html').text();
    $("#urlList_paginate").append(jump_page);
    $("#jump_page_button").click(function(){
        jump_page_action();
    });
},

//頁面跳轉代碼，放在datatables渲染後
function jump_page_action(){
    var page = parseInt($('#jump_page_space').val());//要轉整形
    var page_num = parseInt($("#urlList_next").prev().children('a').text());
    if(page >= 1 && page <= page_num) {
        console.log(urltable.page())
        urltable.page(page-1).draw(false);
    }
};

 有趣的是，這兩串js，第一串用到了第二處定義的函數，第二處用到了第一處的對象。你中有我，我中有你，雞生蛋蛋生雞，有趣。