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

发布时间:2017-6-29 10:09:37编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"JQuery.dataTables表格插件添加跳转到指定页",主要涉及到JQuery.dataTables表格插件添加跳转到指定页方面的内容,对于JQuery.dataTables表格插件添加跳转到指定页感兴趣的同学可以参考一下。

一、解决方案

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);
});

二、完整示例代码

<table id="example1" class="table table-hover table-striped">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>班级</th>
        </tr>
    </thead>
</table>
$(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('&nbsp;<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);
    });
});

显示如下:



更多:

Bootstrap Table使用整理(五)-分页组合查询

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

JQuery.validationEngine表单验证插件


上一篇:Java使用SQLServerBulkCopy实现数据库批量操作
下一篇:什么是句柄

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款