Question

我有一个带有两个选项“All”和“test”的选择菜单.....当我选择“All”时，会显示一个包含15列的数据表，当选择“test”时，另一个带有5列的数据表是选择....

如果小于或等于5个项目，则应禁用分页...

这是我到目前为止所做的，

创建了如上所述的2个数据表，

function All(){

$('#All').dataTable({
    "iDisplayLength": 5,
    "sPaginationType": "four_button",
    "bJQueryUI": true,
    "bRetrieve": true,
    "bAutoWidth": false,
    "fnDrawCallback": function() {
            if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1)  {
                    $('.dataTables_paginate').css("display", "block");
            } else {
                    $('.dataTables_paginate').hide();
            }
        }
});
}

function Test(){

$('#Test').dataTable({
    "iDisplayLength": 5,
    "sPaginationType": "four_button",
    "bJQueryUI": true,
    "bRetrieve": true,
    "bAutoWidth": false,
    "fnDrawCallback": function() {
            if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1)  {
                    $('.dataTables_paginate').css("display", "block");
            } else {
                    $('.dataTables_paginate').hide();
            }
        }
});
}

$(document).ready(function(){

$('#List').val('All');
All();
$('#test').hide();

$("#List").change(function(){

if(this.value == 'All'){

        All();
        $('#All').show();
        $('#Test_wrapper').hide();
}
else if (this.value == 'Test'){
        Test();
        $('#Test').show();
        $('#All_wrapper').hide();
}
});
});

正如您所看到的，我正在检查“fnDrawCallBack”函数中的分页...... 在最初调用时页面加载查找.....但是当我选择测试后选择全部时，分页消失，可以理解......

有没有解决这个问题？任何帮助表示赞赏....

由于

Answer 1

没关系，找到了实现这个的解决方案......

在documennt.ready函数中，在每个表的if条件中放入这样的东西........

$("#productsList").change(function(){

        if(this.value == 'All'){
            All();
            all.fnPageChange( 'first' );
            $('#All').show();
            $('#Test').hide();
            if (Math.ceil((all.fnSettings().fnRecordsDisplay()) / all.fnSettings()._iDisplayLength) > 1)  {
                    $('.dataTables_paginate').css("display", "block");
                } else {
                        $('.dataTables_paginate').hide();
                }

此外，当从下拉菜单中选择“test”时，您会执行类似的if循环...

我试图这样做的另一种方式，（发现上述解决方案更可行，就是这样）......

尝试使用jQuery来识别子节点是否处于活动状态....将值放在documenty.ready函数的if条件中，当值发生变化时，

if($('#Test_wrapper #paginate_next').hasClass('paginate_enabled_next') || $('#Test_wrapper #paginate_previous').hasClass('paginate_enabled_next')){
                $('#Test_wrapper .dataTables_paginate').css("display", "block");
            } else {
                $('#Test_wrapper .dataTables_paginate').hide();
            }

注意：上述方法仅隐藏您的分页.....

我已经尝试过，摧毁我的旧桌子并重新创建它但是这显示了一个javascript错误，没有时间调查它......当我有时间时会这样做：）

请告诉我，如果有更好的解决方案......

欢呼并感谢您花时间阅读此内容：）

选择菜单上的jquery datatables分页

1 个答案: