Question

我有一个简单的项目正在尝试学习JQuery。我正在尝试为数据表创建分页。我能够为每一行生成ID，但是我无法生成分页或基于下拉列表选择显示数字结果。

我已经搜索了几次代码。但是，我没有收到任何错误。我还通过验证器运行了代码，以帮助检查错误，并且控制台内部未显示任何内容。因此，我认为这是一个逻辑错误，而不是语法。如果我错了请纠正我。

所有代码都在index.html文件中。不是一个仅仅为了学习的专业项目。为了方便阅读，还删除了一些表行。使用JQuery 3.3.1和Bootstrap 3.3.7

我不知道错误是从哪里来的。任何帮助将不胜感激。我不是一个想学习的新手，也不是上师。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table Pagination</title>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container" style="margin-top:35px">
<h4>Select Number of Rows</h4>
<div class="form-group">
    <select name="state" id="maxRows" class="from-control" 
style="width:150px;">
        <option value="5000">Show All</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="75">75</option>
        <option value="100">100</option>
    </select>
</div>
<table id="mytable" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Deadpool</td>
            <td>icweiners@gmail.com</td>
            <td>7776668888</td>
            <td>California</td>
        </tr>
        <tr><td>Cable</td><td>1@2.com</td><td>5555555555</td><td>New York</td></tr>
        <tr><td>Cable</td><td>1@2.com</td><td>5555555555</td><td>New York</td></tr>
        <tr><td>Cable</td><td>1@2.com</td><td>5555555555</td><td>New York</td></tr>
        <tr><td>Peter</td><td>peter@gmail.com</td><td>6666666666</td><td>Wisconsin</td></tr>
    </tbody> 
</table>
<div class="pagination-container">
    <nav>
        <ul class="pagination"></ul>
    </nav>
</div>

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap.min.js"></script>
<script>
var table = '#mytable'
$('maxRows').on('change', function(){
$('.pagination').html('')
var trnum = 0
var maxRows = parseInt($(this).val())
var totalRows = $(table+'tbody tr').length
$(table+' tr:gt(0)').each(function(){
    trnum++
    if(trnum > maxRows){
        $(this).hide()
    }
    if(trnum <= maxRows){
        $(this).show()
    }
})
if(totalRows > maxRows){
    var pagenum = Math.ceil(totalRows/maxRows)
    for(var i=1; i <= pagenum;){
        $('.pagination').append('<li data-page="'+i+'">\<span>'+ i++ +'<span 
class="sr-only">(current)</span></span>\</li>').show()
    }
}
$('.pagination li:first-child').addClass('active')
$('.pagination li').on('click', function(){
    var pageNum = $(this).attr('data-page')
    var trIndex = 0;
    $('.pagination li').removeClass('active')
    $this.addClass('active')
    $(table+' tr:gt(0)').each(function(){
        trIndex++
        if(trIndex > (maxRows*pageNum) || trIndex <= ((maxRows*pageNum)- 
 maxRows)){
            $(this).hide()
        } else{
            $(this).show()
        }
    })
})
})
$(function(){
$('table tr:eq(0)').prepend('<th>ID</th>')
var id=0;
$('table tr:gt(0)').each(function(){
    id++
    $(this).prepend('<td>'+id+'</td>')
})
})
</script>
</body>
</html>

使用JQuery在Bootstrap中显示分页

0 个答案: