Fatal编程技术网
  • javascript/
  • Javascript 如何组合分页脚本和筛选脚本？

Javascript 如何组合分页脚本和筛选脚本？

javascript

Javascript 如何组合分页脚本和筛选脚本？,javascript,Javascript,我有一个正在工作的分页脚本，还有我的筛选脚本。不幸的是，一旦我过滤，它会过滤所有的搜索项目，并且超过了分页的最大限制，这应该是事实 我需要我的分页和过滤脚本一起工作。我有样品台供你们使用 这是我的整个剧本： document.getElementById("myInput").onkeyup = function() { filterBar() }; function filterBar() { var input, filter, ta

我有一个正在工作的分页脚本，还有我的筛选脚本。不幸的是，一旦我过滤，它会过滤所有的搜索项目，并且超过了分页的最大限制，这应该是事实

我需要我的分页和过滤脚本一起工作。我有样品台供你们使用

这是我的整个剧本：

    document.getElementById("myInput").onkeyup = function() {
        filterBar()
    };

    function filterBar() {
        var input, filter, table, tr, td, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.disp    lay = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    };
    paginateTable();
    function paginateTable() {
        var currentPage = 0;
        var numPerPage = 10;
        var table = $('#myTable');

        table.find('tbody tr').hide().slice(currentPage * numPerPage,
                (currentPage + 1) * numPerPage).show();
        var numRows = table.find('tbody tr').length;
        var numPages = Math.ceil(numRows / numPerPage);

        table.bind('repaginate', function() {
            table.find('tbody tr').hide().slice(currentPage * numPerPage,
                    (currentPage + 1) * numPerPage).show();
            $('#totalEntries').text(numRows);

            if (numRows == 0) {
                $('#minEntry').text(numRows);
            } else {
                $('#minEntry').text((currentPage * 10) + 1);
            }

            if (currentPage == 0 || numRows == 0) {
                $('.previousPage').hide();
            } else {
                $('.previousPage').show();
                $('.previousPage').data('page', currentPage - 1);
            }

            if (currentPage == (numPages - 1) || numRows == 0) {
                $('.nextPage').hide();
                $('#maxEntry').text(numRows);
            } else {
                $('.nextPage').show();
                $('.nextPage').data('page', currentPage + 1);
                if (numRows < 10) {
                    $('#maxEntry').text(numRows);
                } else {
                    $('#maxEntry').text((currentPage * 10) + 10);
                }
            }

            $('#currentPage').text(currentPage + 1);
        });

        table.trigger('repaginate');

        $('.previousPage, .nextPage').click(function(e) {
            e.preventDefault();
            currentPage = $(this).data('page');
            table.trigger('repaginate');
        });
    }

document.getElementById（“myInput”）.onkeyup=function（）{
过滤器（）
};
函数过滤器（）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.disp lay=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
};
分页表（）；
函数分页表（）{
var-currentPage=0；
var numPerPage=10；
变量表=$（“#我的表”）；
table.find（'tbody tr'）.hide（）.slice（当前页面*numPerPage，
（当前页面+1）*numPerPage.show（）；
var numRows=table.find（'tbody tr'）.length；
var numPages=Math.ceil（numRows/numPerPage）；
table.bind（'repaginate'，function（）{
table.find（'tbody tr'）.hide（）.slice（当前页面*numPerPage，
（当前页面+1）*numPerPage.show（）；
$（'#totalEntries'）.text（numRows）；
如果（numRows==0）{
$（#minEntry'）。文本（numRows）；
}否则{
$（#minEntry'）。文本（（当前页*10）+1）；
}
如果（当前页面==0 | | numRows==0）{
$（'.previousPage'）.hide（）；
}否则{
$（'.previousPage'）.show（）；
$（'.previousPage'）。数据（'page'，currentPage-1）；
}
如果（currentPage==（numPages-1）| | numRows==0）{
$（'.nextPage'）.hide（）；
$（'#maxEntry'）.text（numRows）；
}否则{
$（'.nextPage'）.show（）；
$（'.nextPage'）。数据（'第页'，当前页+1）；
如果（numRows<10）{
$（'#maxEntry'）.text（numRows）；
}否则{
$（'#maxEntry'）.text（（当前页*10）+10）；
}
}
$（'#currentPage'）。文本（currentPage+1）；
});
表.触发器（“重新分页”）；
$（'.previousPage、.nextPage'）。单击（函数（e）{
e、 预防默认值（）；
currentPage=$（this）.data（'page'）；
表.触发器（“重新分页”）；
});
}
这是我的带有分页按钮的示例表

过滤器： 


英语
其他语言
地位
阿尔弗雷德·福特基斯特
德国
28
伯格伦兹蛇
瑞典
28
岛屿贸易
英国
28
科尼格利希·埃森
德国
28
笑巴克斯酒窖
加拿大
28
马加兹尼营养不良
意大利
28
北/南
英国
28
巴黎特色酒店
法国
28
阿尔弗雷德·福特基斯特
德国
28
伯格伦兹蛇
瑞典
28
岛屿贸易
英国
28
科尼格利希·埃森
德国
28
笑巴克斯酒窖
加拿大
28
马加兹尼营养不良
意大利
28
北/南
英国
28
巴黎特色酒店
法国
28
阿尔弗雷德·福特基斯特
德国
28
伯格伦兹蛇
瑞典
28
岛屿贸易
英国
28
科尼格利希·埃森
德国
28
笑巴克斯酒窖
加拿大
28
马加兹尼营养不良
意大利
28
北/南
英国
28
巴黎特色酒店
法国
28
阿尔弗雷德·福特基斯特
德国
28
伯格伦兹蛇
瑞典
28
岛屿贸易
英国
28
科尼格利希·埃森
德国
28
笑巴克斯酒窖
加拿大
28
马加兹尼营养不良
意大利
28
北/南
英国
28
巴黎特色酒店
法国
28
阿尔弗雷德·福特基斯特
德国
28
伯格伦兹蛇
瑞典
28
岛屿贸易
英国

<table id="myTable">
    <thead>
        <tr>
            <th style="width: 60%;">English</th>
            <th style="width: 40%;">Other Language</th>
            <th style="width: 30%;">Status</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Canada</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Italy</td>
            <td>28</td>
        </tr>
        <tr>
            <td>North/South</td>
            <td>UK</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Paris specialites</td>
            <td>France</td>
            <td>28</td>
        </tr>
    </tbody>
</table>

<div class="table-pagination">
    <div class="page-control">
        Showing <span id="minEntry">0</span> to <span id="maxEntry">0</span>
        of <span id="totalEntries">0</span> entries
        <ul class="pagination">
            <li><a href="#" class="previousPage">Newer</a></li>
            <li><a href="#" class="previousPage">&lt;</a></li>
            <li><a href="#" id="currentPage" class="page-number">1</a></li>
            <li><a href="#" class="nextPage">&gt;</a></li>
            <li><a href="#" class="nextPage">Older</a></li>
        </ul>
    </div>
</div>
</ul>