分页相关 select筛选

最新推荐文章于 2023-05-29 13:56:31 发布

原创最新推荐文章于 2023-05-29 13:56:31 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select筛选表格

前端JS 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一个使用DataTables进行数据筛选与分页的方法。通过监听点击事件来获取筛选条件，然后遍历表格中的每一行，根据筛选条件显示或隐藏对应的行。此方法适用于需要动态更新展示数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.dataTables分页

2.筛选

$(document.body).on("click",".inquire",function () {
    var coverValue = $(".filter .cover_country option:selected").val();
    var operatorValue = $(".filter .operator_id option:selected").val();
    var supporterValue = $(".filter .supporter_id option:selected").val();
    if(coverValue.length > 0 || operatorValue.length > 0 || supporterValue.length > 0){
        $("table tr").each(function () {
            var cover = true;
            var operator = true;
            var supporter = true;
            var covertd = $(this).find(".td_country_cover span").attr("value");      
            var operatortd = $(this).find(".td_operator_id span").attr("value");
            var supportertd = $(this).find(".td_supporter_id span").attr("value");
            if(coverValue.length > 0 && covertd != coverValue){
                cover = false;
            }
            if(operatorValue.length > 0 && operatortd != operatorValue){
                operator = false;
            }
            if(supporterValue.length > 0 && supportertd != supporterValue){
                supporter = false;
            }
            if(covertd != undefined  ){
                if(cover && operator &&supporter){
                    $(this).show();
                }
                else{
                    $(this).hide();
                }
            }
        });
    }
});