将新筛选器函数与现有分页和筛选器jQuery/Javascript合并

我的新表过滤函数有问题，问题发生在选择要过滤的报价时，而不是显示表中所有可过滤数据的行。过滤器只过滤可见行减去分页隐藏的数据

最重要的是，当我单击“更多”以显示更多行时，表开始显示当前筛选器之外的数据。这不好

我还有另一个过滤功能，可以通过“免费手机”进行过滤，该功能与我的分页方法相结合（代码如下）

如何将此过滤器（下拉式过滤器）与我的“免费手机”过滤器（复选框一）和分页方法合并，以便当我选择按过滤器过滤的选项时，处理表中的所有数据，而不仅仅是分页显示的可见行

上面的提琴显示了两个过滤功能并排工作，但它们不能很好地协同工作

正如您在上面的JSFIDLE中所看到的，下拉过滤器从HTML中收集其选项，然后将它们显示在下拉菜单中，因此所有选项都存在，以便通过分页进行过滤

下面是每个函数的jQuery和Javascript

这是一个功能不好的新过滤器

$(document).ready(function() {
    $('.filter-gift').each(filterItems);
});

function filterItems(e) {
    var items = [];
    var table = '';
    tableId = $(this).parent().parent().attr('tag')

      var listItems = "";
        listItems += "<option value=''> -Select- </option>";
        $('div[tag="' + tableId + '"] table.internalActivities .information').each(function (i) {
            var itm = $(this)[0].innerText;
            if ($.inArray(itm, items) == -1) {
                items.push($(this)[0].innerText);
                listItems += "<option value='" + i + "'>" + $(this)[0].innerText + "</option>";
            }
        });

    $('div[tag="' + tableId+ '"] .filter-gift').html(listItems);

    $('.filter-gift').change(function () {
    if($(this).val()!= "") {
        var tableIdC = $(this).parent().parent().attr('tag');

        var text = $('div[tag="' + tableIdC + '"] select option:selected')[0].text.replace(/(\r\n|\n|\r| |)/gm, "");;
            $('div[tag="' + tableIdC + '"] .product-information-row').each(function (i) {
                if ($(this).text().replace(/(\r\n|\n|\r| |)/gm, "") == text) {
                    $(this).show();
                    $(this).prev().show();
                    $(this).next().show();
                }
                else {
                    $(this).hide();
                    $(this).prev().hide();
                    $(this).next().hide();
                }
            }); 
            } else {
            $(this).parent().parent().find('table tr').show();
            }
        });     
}

$（文档）.ready（函数（）{
$（'.filter gift'）。每个（filterItems）；
});
函数过滤器项（e）{
var项目=[]；
var表=“”；
tableId=$（this.parent（）.parent（）.attr（'tag'））
var listItems=“”；
listItems+=“-选择-”；
$（'div[tag=“”+tableId+“]table.internalActivities.information'）。每个（函数（i）{
var itm=$（this）[0]；
如果（$.inArray（itm，项目）=-1）{
items.push（$（this）[0].innerText）；
listItems+=“”+$（此）[0]。innerText+“”；
}
});
$（'div[tag=“”+tableId+“].filter gift'）.html（listItems）；
$（'.filter gift'）.change（函数（）{
if（$（this.val（）！=“”）{
var tableIdC=$（this.parent（）.parent（）.attr（'tag'）；
var text=$（'div[tag=“'+tableIdC+'”]选择选项：已选定“[0]。text.replace（/（\r\n |\n |）/gm，”）；；
$（'div[tag=“”+tableIdC+“].产品信息行）。每个（函数（i）{
如果（$（this）.text（）.replace（/（\r\n |\n |\r | |）/gm，“”==text）{
$（this.show（）；
$（this.prev（）.show（）；
$（this.next（）.show（）；
}
否则{
$（this.hide（）；
$（this.prev（）.hide（）；
$（this.next（）.hide（）；
}
}); 
}否则{
$（this.parent（）.parent（）.find（'table tr'）.show（）；
}
});     
}

这是我想与上面的函数（工作）合并的筛选和分页函数

jQuery.fn.sortPaging=函数（选项）{
var默认值={
页码：2
};
var设置=$.extend（真、默认、选项）；
返回此值。每个（函数（）{
var容器=$（此）；
var tableBody=container.find（'.internalActivities>tbody'）；
var dataRows=[]；
var currentPage=1；
var-maxPages=1；
var buttonMore=container.find（'.seeMoreRecords'）；
var buttonLess=container.find（'.seeLessRecords'）；
var buttonFree=container.find（'.filter-free'）；
var tableRows=[]；
var-maxFree=0；
var filterFree=buttonFree.is（':checked'）；
函数displayRows（）{
tableBody.empty（）；
var=0；
$.each（数据行、函数（i、ele）{
如果（！filterFree | |（filterFree&&ele.isFree））{
tableBody.append（ele.thisRow）.append（ele.nextRow）；
显示++；
如果（显示>=currentPage*settings.pageRows）{
返回false；
};
};
});
};
函数检查按钮（）{
toggleClass（'element_invisible'，currentPage=maxFreePages:currentPage>=maxPages）；
};
函数showMore（）{
currentPage++；
显示行（）；
选中按钮（）；
};
函数showLess（）{
当前页--；
显示行（）；
选中按钮（）；
};
函数changedFree（）{
filterFree=buttonFree.is（“：选中”）；
if（filterFree&¤tPage>maxFreePages）{
currentPage=maxFreePages；
};
显示行（）；
选中按钮（）；
};
tableBody.find（'.product data row'）。每个（函数（i，j）{
var thisRow=$（此）；
var nextRow=thisRow.next（）；
var amount=parseFloat（thisRow.find（'.amount'）.text（）.replace（/£/，''）；
var isFree=thisRow.find（'.free'）.length；
maxFree+=isFree；
dataRows.push({
金额:金额,，
这排：这排，
nextRow:nextRow，
isFree:isFree
});
})
排序（函数（a，b）{
返回a.金额-b.金额；
});
maxPages=Math.ceil（dataRows.length/settings.pageRows）；
maxFreePages=Math.ceil（maxFree/settings.pageRows）；
tableRows=tableBody.find（“tr”）；
按钮更多（'click'，showMore'）；
无按钮打开（'点击'，无显示）；
按钮自由打开（'change'，changedFree）；
显示行（）；
选中按钮（）；
})
};
$（'.sort_paging'）.sortPaging（）；

目标

• 使筛选器与分页一起工作
• 使过滤器与“免费手机”过滤器同时工作

---

您的代码不必要地复杂

jQuery.fn.sortPaging = function(options) {
    var defaults = {
        pageRows: 2
    };
    var settings = $.extend(true, defaults, options);
    return this.each(function() {

        var container = $(this);
        var tableBody = container.find('.internalActivities > tbody');
        var dataRows = [];
        var currentPage = 1;
        var maxPages = 1;
        var buttonMore = container.find('.seeMoreRecords');
        var buttonLess = container.find('.seeLessRecords');
        var buttonFree = container.find('.filter-free');
        var tableRows = [];
        var maxFree = 0;
        var filterFree = buttonFree.is(':checked');
        function displayRows() {
            tableBody.empty();
            var displayed = 0;
            $.each(dataRows, function(i, ele) {
                if( !filterFree || (filterFree && ele.isFree) ) {
                    tableBody.append(ele.thisRow).append(ele.nextRow);
                    displayed++;
                    if( displayed >= currentPage*settings.pageRows ) {
                        return false;
                    };
                };
            });
        };
        function checkButtons() {
            buttonLess.toggleClass('element_invisible', currentPage<=1);
            buttonMore.toggleClass('element_invisible', filterFree ? currentPage>=maxFreePages : currentPage>=maxPages);
        };
        function showMore() {
            currentPage++;
            displayRows();
            checkButtons();
        };
        function showLess() {
            currentPage--;
            displayRows();
            checkButtons();
        };
        function changedFree() {
            filterFree = buttonFree.is(':checked');
            if( filterFree && currentPage>maxFreePages ) {
                currentPage=maxFreePages;
            };
            displayRows();
            checkButtons();
        };

        tableBody.find('.product-data-row').each(function(i, j) {
            var thisRow = $(this);
            var nextRow = thisRow.next();
            var amount = parseFloat(thisRow.find('.amount').text().replace(/£/, ''));
            var isFree = thisRow.find('.free').length;
            maxFree += isFree;
            dataRows.push({
                amount: amount,
                thisRow: thisRow,
                nextRow: nextRow,
                isFree: isFree
            });
        })

        dataRows.sort(function(a, b) {
            return a.amount - b.amount;
        });
        maxPages = Math.ceil(dataRows.length/settings.pageRows);
        maxFreePages = Math.ceil(maxFree/settings.pageRows);

        tableRows = tableBody.find("tr");

        buttonMore.on('click', showMore);
        buttonLess.on('click', showLess);
        buttonFree.on('change', changedFree);

        displayRows();
        checkButtons();

    })

};

$('.sort_paging').sortPaging();

function onFilterChange() {
    filterProducts();
    resetPagination();
    showNextPage();
}

<tbody freeTv='false' freeHandset='false' cost='200'>
    <tr>
        <td>content of product 1</td>
    </tr>
    <tr>
        <td>description of product 1</td>
    </tr>
</tbody>
<tbody freeTv='true' freeHandset='false' cost='300'>
    <tr>
        <td>content of product 2</td>
    </tr>
    <tr>
        <td>description of product 2</td>
    </tr>
</tbody>

function filterProducts() {
    $('tbody').addClass('filtered');
    // ... some domain-specific magic here ...
    $('tbody[freeTv="true"]').removeClass('filtered');
}

.filtered { display: none; }

function resetPagination() {
    $('tbody').addClass('paged');
    $('tbody.filtered').removeClass('paged');
}

function showNextPage() {
    $('tbody.paged').slice(0, 10).removeClass('paged');
}

// This function is for displaying data from HTML "data-child-value" tag in the Child Row.
function format(value) {
      return '<div>Hidden Value: ' + value + '</div>';
  }

// Initialization of dataTable and settings.
  $(document).ready(function () {
      var dataTable = $('#example').DataTable({
       bLengthChange: false,
       "pageLength": 5,
       "pagingType": "simple",
       "order": [[ 7, "asc" ]],
       "columnDefs": [
            {
                "targets": [ 5 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 6 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 7 ],
                "visible": false,
                "searchable": true
            }
        ],

// Dropdown filter function for dataTable from hidden column number 5 for filtering gifts.
       initComplete: function () {
            this.api().columns(5).every(function () {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')
                    .appendTo($("#control-panel").find("div").eq(1))
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());
                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });

// This function is for handling Child Rows.
    $('#example').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = dataTable.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format(tr.data('child-value'))).show();
              tr.addClass('shown');
          }
    });

// Checkbox filter function below is for filtering hidden column 6 to show Free Handsets only.
    $('#checkbox-filter').on('change', function() {
        dataTable.draw();
    });

    $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
        var target = '£0.00';
        var position = data[6]; // use data for the position column
        if($('#checkbox-filter').is(":checked")) {
            if (target === position) {
            return true;
         }
         return false;
        }
        return true;
      }
    );
});