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，第一串用到了第二处定义的函数，第二处用到了第一处的对象。你中有我，我中有你，鸡生蛋蛋生鸡，有趣。

转载于:https://www.cnblogs.com/huim/p/9627191.html