JQuery.dataTables表格插件添加跳转到指定页

╰+哭是因爲堅強的太久メ 2022-06-14 04:06 338阅读 0赞

**一、解决方案**

1.添加自定义工具栏，嵌入文本框

"dom": 'l<"toolbar">frtip', //自定义工具栏

//设置工具栏内容
    //l - length changing input control
    //f - filtering input
    //t - The table!
    //i - Table information summary
    //p - pagination control
    //r - processing display element

$("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</b>');

2.监听文本框的change事件，执行插件的调转页面方法

//调转到指定页面索引 ，注意大小写
    var oTable = $('#example1').dataTable();
    oTable.fnPageChange(page);

3.插件绘制成功后，绑定文本框的值

//绘制的时候触发，绑定文本框的值
    table.on('draw.dt', function (e, settings, data) {
        var info = table.page.info();
        //此处的page为0开始计算
        console.info('Showing page: ' + info.page + ' of ' + info.pages);
    
        $('#searchNumber').val(info.page + 1);
    });

**二、完整示例代码**

$(function () {
        //注意方法名为DataTable
        var table = $('#example1').DataTable({
            "dom": 'l<"toolbar">frtip', //自定义工具栏
            "pagingType": "full_numbers",
            lengthMenu: [3, 5, 10],
            processing: true,//是否使用进度条
            serverSide: true,//是否启用数据库加载
            ajax: {
                url: '/tableone/getlist',
                type: 'post',
                data: function (d) {
                    d.name = '张三';
                    /*
                    * 自定义aja参数
                    * 特别说明，此处可以重写控件的默认参数，比如分页参数
                    */
                    // d.start = 0;
                    //console.info(d);
                    //var page = $('#searchNumber').val();
                    //page = parseInt(page) || 1;
                    //d.start = (page - 1) * d.length;
                }
            },
            //指定列绑定的字段
            columns: [
                { data: 'sno' },
                { data: 'sname' },
                { data: 'ssex' },
                { data: 'sbirthday' },
                { data: 'class' }
            ],
            order: [
                [3, 'desc']
            ]
        });
    
        $("div.toolbar").html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</b>');
    
        //绑定分页事件----在切换分页的时候触发
        //table.on('page.dt', function () {
        //    var info = table.page.info();
        //    console.info('Showing page: ' + info.page + ' of ' + info.pages);
        //});
    
        //绘制的时候触发，绑定文本框的值
        table.on('draw.dt', function (e, settings, data) {
            var info = table.page.info();
            //此处的page为0开始计算
            console.info('Showing page: ' + info.page + ' of ' + info.pages);
            $('#searchNumber').val(info.page + 1);
        });
        //监听文本框更改
        $('#searchNumber').change(function () {
            var page = $(this).val();
            page = parseInt(page) || 1;
            page = page - 1;
    
            //调转到指定页面索引 ，注意大小写
            var oTable = $('#example1').dataTable();
            oTable.fnPageChange(page);
        });
    });

显示如下：

![Center][]  
  
更多：

[Bootstrap Table使用整理（五）-分页组合查询][Bootstrap Table_-]

[jquery.fly.js实现添加购物车效果、实现抛物线运动][jquery.fly.js]

[JQuery.validationEngine表单验证插件][JQuery.validationEngine]

[Center]: /images/20220614/6f311d5d3f45489dafe7924fffbc3ad5.png
[Bootstrap Table_-]: http://blog.csdn.net/u011127019/article/details/72933921
[jquery.fly.js]: http://blog.csdn.net/u011127019/article/details/62238275
[JQuery.validationEngine]: http://blog.csdn.net/u011127019/article/details/53558262