Javascript 此表的jQuery插件/库简化了代码

请看一看JSFIDLE，代码变得越来越复杂，我的函数无法正常工作

有谁能告诉我，我可以用什么来代替标准jQuery和javascript来简化构建（使用show-more样式的分页方法）

我需要像JSFIDLE一样对现有html进行排序、过滤和分页

谢谢

$(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();
            }
        });     
}


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();

$（文档）.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插件

我查看了它，但它似乎没有显示更多分页样式，或者是吗？是的，没有显示更多/显示更少功能，但是可以通过稍微修改数据表中现有的选项来实现。带有“下一步”和“上一步”按钮的“简单”分页。链接：要将标签从“下一个”和“上一个”更改为“显示更多”和“显示更少”，可以使用以下方法。更改“下一个”标签：更改“上一个”标签：希望有帮助！你认为（在你看来）我最好扔掉我当前的代码，并尝试用datatables构建这个表吗？我强烈推荐它，因为我在最复杂的场景中使用过它，它工作起来很有魅力。当然，它有学习曲线。当然，你可以使用datatables构建任何内容和任何布局，我已经在这么多复杂的网站上使用了过滤器组合和更多功能，如果你能花一些时间使用datatables，你不会后悔的。