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

最新推荐文章于 2022-05-13 14:16:51 发布

原创

最新推荐文章于 2022-05-13 14:16:51 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#datatable

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

修改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"});
}