Fatal编程技术网
  • javascript/
  • 如何使用带筛选器的my datatables创建javascript分页

如何使用带筛选器的my datatables创建javascript分页

javascript html

如何使用带筛选器的my datatables创建javascript分页,javascript,html,Javascript,Html,有人能帮我在当前脚本上添加一个简单的分页脚本吗。 我需要有我的数据表是在每页5也许这也可以访问我创建的当前过滤器。请帮我做这个 这是我的筛选脚本 function filterBar() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); t

有人能帮我在当前脚本上添加一个简单的分页脚本吗。 我需要有我的数据表是在每页5也许这也可以访问我创建的当前过滤器。请帮我做这个

这是我的筛选脚本

    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.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

函数filterBar（）{
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.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}
这是我的数据表

过滤器： 


名称
国家
年龄
阿尔弗雷德·福特基斯特
德国
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
岛屿贸易
英国
28
科尼格利希·埃森
德国
28
笑巴克斯酒窖
加拿大
28
马加兹尼营养不良
意大利
28
北/南
英国
28
巴黎特色酒店
法国
28
提前感谢你们的帮助

尝试来自的插件。 它将很好地处理您的分页。

尝试来自的插件。
它会很好地处理你的分页问题。

对不起，我是新来的，我不能使用任何插件，只需一个简单的js分页将是一个很大的帮助不要听这个家伙说，是的，如果您只有很少的记录，datatable将处理分页，但请相信我，当您获取数千条记录时，您最不希望的就是呈现分页前端。在服务器端进行分页。@RajaKhoury你能帮我做这件事吗。你能在我的代码中添加分页JS吗？我急需帮助。如果你使用datatables.net插件，那么它非常简单，他们的指导非常好。@John查看文档中的
dom
选项，在那里你可以设置在何处呈现表格、过滤器、分页，也可以使用
search（）
api来过滤表格对不起，我是新来的，我不能使用任何插件，只是一个简单的js用于分页将是一个很大的帮助不要听这个家伙说，是的datatable将处理分页如果你有很少的记录，但相信我，当你获取数千条记录时，你最不想做的就是呈现分页前端。在服务器端进行分页。@RajaKhoury你能帮我做这件事吗。你能将分页JS添加到我的代码中吗？我急需帮助。如果你使用datatables.net插件，那么它非常简单，他们的指导非常好。@John查看文档中的
dom
选项 
<table id="myTable">
    <thead>
        <tr>
            <th style="width: 60%;">Name</th>
            <th style="width: 40%;">Country</th>
            <th style="width: 30%;">Age</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>