dataTables 增加输入指定页数进行跳转

最新推荐文章于 2020-09-18 08:33:50 发布

Guyal_

最新推荐文章于 2020-09-18 08:33:50 发布

阅读量2.1k

点赞数

文章标签： datatable

本文链接：https://blog.csdn.net/Say_one/article/details/80682913

版权

本文介绍了如何修改dataTables.bootstrap.js和jquery.dataTables.js源文件，为dataTables添加输入指定页数直接跳转的功能。在for循环外部添加输入框，并在fnDrawCallback中绑定事件，监听回车键触发跳转。对于页面中存在多个表格的情况，可通过设置不同的table表格id解决分页跳转问题。

摘要由CSDN通过智能技术生成

修改dataTables.bootstrap.js源文件，找到

if ( btnDisplay ) {
    node = $('<li>', {
            'class': classes.sPageButton+' '+btnClass,
            'id': idx === 0 && typeof button === 'string' ?
                settings.sTableId +'_'+ button :
                null
        } )
        .append( $('<a>', {
                'href': '#',
                'aria-controls': settings.sTableId,
                'aria-label': aria[ button ],
                'data-dt-idx': counter,
                'tabindex': settings.iTabIndex
            } )
            .html( btnDisplay )
        )
        .appendTo( container );

    settings.oApi._fnBindAction(
        node, {action: button}, clickHandler
    );

    counter++;
}

在for循环外面添加：

if($("#redirect")!=null){
    $("#redirect").remove();
    $("<input type=\"text\" style=\"width: 50px;height: 30px;border-radius: 4px 4px 4px 4px;\" id=\"redirect\" class=\"redirect\">").appendTo( container );
    $('#redirect').css({
  "outline":"none","margin-left":"5px","margin-right":"5px","position":"absolute","right":"80px"});
}