jquery - 分页在jquery中无法正常工作
问题描述
当我放置搜索项目时，第一个分页显示搜索项目的行，但之后分页不会填充搜索的行，而是显示默认行。所以我想要的是当我点击分页 2 时，表格应该显示搜索到的项目行而不是默认行。基本上，我正在尝试开发数据表之类的东西，我可以在其中合并分页、搜索选项等
$(document).ready(function() {
var rowsShown = 5;
var rowsTotal = $('#data tr').length;
var numPages = rowsTotal / rowsShown;
$("#error").hide();
$("#total").html(rowsTotal);
$("#nav").show();
$('#data tr').hide();
$('#data tr').slice(0, rowsShown).show();
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('<a href="#" rel="' + i + '" class="pagination">' + pageNum + '</a> ');
}
$('#nav a:first').addClass('active').css({
'color': '#1D6185',
'font-weight': 'bold',
'background-color': '#86CCF1'
});
$('#nav a').click(function() {
$('#nav a').removeClass('active').removeAttr('style');
$(this).addClass('active').css({
'color': '#1D6185',
'font-weight': 'bold',
'background-color': '#86CCF1'
});
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tr').hide().slice(startItem, endItem).css('display', 'table-row').animate({
opacity: 1
}, 300);
});
//-------------search---------
$('#search').keyup(function() {
$('#data tr').hide();
$("#total").hide();
$('#nav').empty();
var value = $('#search').val().toLowerCase();
var resultCount = 0;
$('#data tr').each(function() {
if ($(this).text().toLowerCase().indexOf(value) != -1) {
resultCount++;
}
});
$("#total").html(resultCount).show();
var Search_rowsShown = 5;
var Search_numPages = resultCount / Search_rowsShown;
var search_value = $(this).val().toLowerCase();
$("#data tr").filter(function() {
return $(this).text().toLowerCase().indexOf(search_value) > -1
})
.slice(0, 5)
.show();
for (j = 0; j < Search_numPages; j++) {
var Search_pageNum = j + 1;
$('#nav').append('<a href="#" rel="' + j + '">' + Search_pageNum + '</a> ');
}
$('#nav a:first').addClass('active').css({
'color': 'red',
'font-weight': 'bold'
});
$('#nav a').click(function() {
$('#nav a').removeClass('active').removeAttr('style');
$(this).addClass('active').css({
'color': 'red',
'font-weight': 'bold'
});
var search_currPage = $(this).attr('rel');
var search_startItem = search_currPage * Search_rowsShown;
var search_endItem = search_startItem + Search_rowsShown;
$('#data tr').hide().slice(search_startItem, search_endItem).css('display', 'table-row').animate({
opacity: 1
}, 300);
});
if (resultCount == 0) {
$("#error").html("No Data").show();
$("#total").hide();
$("#nav").hide();
$("#totentry").hide();
} else {
$("#error").hide();
$("#total").show();
$("#nav").show();
$("#totentry").show();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" class="tab" id="tab">
<thead>
<tr>
<th colspan="2">Report/Table Name</th>
<th colspan="3"><span class="srch">Search :</span><input type="text" id="search" class="searchTerm" placeholder="Please enter the text here..." /></th>
</tr>
<tr>
<th>SL.No</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td>1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
<tr>
<td>7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
</tr>
<tr>
<td>8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
</tr>
<tr>
<td>9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
</tr>
<tr>
<td>10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
</tr>
<tr>
<td>11</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
</tr>
<tr>
<td>12</td>
<td>Row 12</td>
<td>Row 12</td>
<td>Row 12</td>
<td>Row 12</td>
</tr>
<tr>
<td>13</td>
<td>Row 13</td>
<td>Row 13</td>
<td>Row 13</td>
<td>Row 13</td>
</tr>
<tr>
<td>14</td>
<td>Row 14</td>
<td>Row 14</td>
<td>Row 14</td>
<td>Row 14</td>
</tr>
<tr>
<td>15</td>
<td>Row 15</td>
<td>Row 15</td>
<td>Row 15</td>
<td>Row 15</td>
</tr>
<tr>
<td>16</td>
<td>Row 16</td>
<td>Row 16</td>
<td>Row 16</td>
<td>Row 16</td>
</tr>
<tr>
<td>17</td>
<td>Row 17</td>
<td>Row 17</td>
<td>Row 17</td>
<td>Row 17</td>
</tr>
<tr>
<td>18</td>
<td>Row 18</td>
<td>Row 18</td>
<td>Row 18</td>
<td>Row 18</td>
</tr>
<tr>
<td>19</td>
<td>Row 19</td>
<td>Row 19</td>
<td>Row 19</td>
<td>Row 19</td>
</tr>
<tr>
<td>20</td>
<td>Row 20</td>
<td>Row 20</td>
<td>Row 20</td>
<td>Row 20</td>
</tr>
<tr>
<td>21</td>
<td>Row 21</td>
<td>Row 21</td>
<td>Row 21</td>
<td>Row 21</td>
</tr>
<tr>
<td>22</td>
<td>Row 22</td>
<td>Row 22</td>
<td>Row 22</td>
<td>Row 22</td>
</tr>
<tr>
<td>23</td>
<td>Row 23</td>
<td>Row 23</td>
<td>Row 23</td>
<td>Row 23</td>
</tr>
<tr>
<td>24</td>
<td>Row 24</td>
<td>Row 24</td>
<td>Row 24</td>
<td>Row 24</td>
</tr>
</tbody>
<tfoot id="footer">
<tr>
<td colspan="2"><span id="totentry">Total Entry :</span><span id="total"></span></td>
<td align="center"><span id="error"></span></td>
<td colspan="2">
<div id="nav" class="nav"></div>
</td>
</tr>
</tfoot>
</table>
</html>解决方案
这是我的看法，为什么在搜索后使用分页时总是原始数据的原因是，<tr>与搜索不匹配的数据仍然存在，只是隐藏了。
因此，我必须在任何搜索之前将初始值存储<tr> nodes到变量中，并始终将其用作搜索的基础。然后在搜索功能中，您删除所有<tr>s 并将其替换为从搜索结果返回的附加到#data / <tbody>
这是一个工作示例：
$(document).ready(function() {
var rowsShown = 5;
var rowsTotal = $('#data tr').length;
var numPages = rowsTotal / rowsShown;
$("#error").hide();
$("#total").html(rowsTotal);
$("#nav").show();
let initialTBody = $('#data tr')
$('#data tr').hide();
initialTBody.slice(0, rowsShown).show();
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('<a href="#" rel="' + i + '" class="pagination">' + pageNum + '</a> ');
}
$('#nav a:first').addClass('active').css({
'color': '#1D6185',
'font-weight': 'bold',
'background-color': '#86CCF1'
});
$('#nav a').click(function() {
$('#nav a').removeClass('active').removeAttr('style');
$(this).addClass('active').css({
'color': '#1D6185',
'font-weight': 'bold',
'background-color': '#86CCF1'
});
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tr').hide().slice(startItem, endItem).css('display', 'table-row').animate({
opacity: 1
}, 300);
});
//-------------search---------
$('#search').keyup(function() {
$('#data tr').remove();
$("#total").hide();
$('#nav').empty();
var value = $('#search').val().toLowerCase();
var resultCount = 0;
initialTBody.each(function() {
if ($(this).text().toLowerCase().indexOf(value) != -1) {
resultCount++;
}
});
$("#total").html(resultCount).show();
var Search_rowsShown = 5;
var Search_numPages = resultCount / Search_rowsShown;
var search_value = $(this).val().toLowerCase();
let resultsTBody = initialTBody.filter(function() {
//return $(this).text().toLowerCase().indexOf(search_value) > -1
if ($(this).text().toLowerCase().indexOf(search_value) > -1) {
return $(this)
}
})
resultsTBody.slice(0, Search_rowsShown).show();
$('#data').append(resultsTBody)
for (j = 0; j < Search_numPages; j++) {
var Search_pageNum = j + 1;
$('#nav').append('<a href="#" rel="' + j + '">' + Search_pageNum + '</a> ');
}
$('#nav a:first').addClass('active').css({
'color': 'red',
'font-weight': 'bold'
});
$('#nav a').click(function() {
$('#nav a').removeClass('active').removeAttr('style');
$(this).addClass('active').css({
'color': 'red',
'font-weight': 'bold'
});
var search_currPage = $(this).attr('rel');
var search_startItem = search_currPage * Search_rowsShown;
var search_endItem = search_startItem + Search_rowsShown;
$('#data tr').hide().slice(search_startItem, search_endItem).css('display', 'table-row').animate({
opacity: 1
}, 300);
});
if (resultCount == 0) {
$("#error").html("No Data").show();
$("#total").hide();
$("#nav").hide();
$("#totentry").hide();
} else {
$("#error").hide();
$("#total").show();
$("#nav").show();
$("#totentry").show();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" class="tab" id="tab">
<thead>
<tr>
<th colspan="2">Report/Table Name</th>
<th colspan="3"><span class="srch">Search :</span><input type="text" id="search" class="searchTerm" placeholder="Please enter the text here..." /></th>
</tr>
<tr>
<th>SL.No</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td>1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
<tr>
<td>7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
</tr>
<tr>
<td>8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
</tr>
<tr>
<td>9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
</tr>
<tr>
<td>10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
</tr>
<tr>
<td>11</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
<td>Row 11</td>
</tr>
<tr>
<td>12</td>
<td>Row 12</td>
<td>Row 12</td>
<td>Row 12</td>
<td>Row 12</td>
</tr>
<tr>
<td>13</td>
<td>Row 13</td>
<td>Row 13</td>
<td>Row 13</td>
<td>Row 13</td>
</tr>
<tr>
<td>14</td>
<td>Row 14</td>
<td>Row 14</td>
<td>Row 14</td>
<td>Row 14</td>
</tr>
<tr>
<td>15</td>
<td>Row 15</td>
<td>Row 15</td>
<td>Row 15</td>
<td>Row 15</td>
</tr>
<tr>
<td>16</td>
<td>Row 16</td>
<td>Row 16</td>
<td>Row 16</td>
<td>Row 16</td>
</tr>
<tr>
<td>17</td>
<td>Row 17</td>
<td>Row 17</td>
<td>Row 17</td>
<td>Row 17</td>
</tr>
<tr>
<td>18</td>
<td>Row 18</td>
<td>Row 18</td>
<td>Row 18</td>
<td>Row 18</td>
</tr>
<tr>
<td>19</td>
<td>Row 19</td>
<td>Row 19</td>
<td>Row 19</td>
<td>Row 19</td>
</tr>
<tr>
<td>20</td>
<td>Row 20</td>
<td>Row 20</td>
<td>Row 20</td>
<td>Row 20</td>
</tr>
<tr>
<td>21</td>
<td>Row 21</td>
<td>Row 21</td>
<td>Row 21</td>
<td>Row 21</td>
</tr>
<tr>
<td>22</td>
<td>Row 22</td>
<td>Row 22</td>
<td>Row 22</td>
<td>Row 22</td>
</tr>
<tr>
<td>23</td>
<td>Row 23</td>
<td>Row 23</td>
<td>Row 23</td>
<td>Row 23</td>
</tr>
<tr>
<td>24</td>
<td>Row 24</td>
<td>Row 24</td>
<td>Row 24</td>
<td>Row 24</td>
</tr>
</tbody>
<tfoot id="footer">
<tr>
<td colspan="2"><span id="totentry">Total Entry :</span><span id="total"></span></td>
<td align="center"><span id="error"></span></td>
<td colspan="2">
<div id="nav" class="nav"></div>
</td>
</tr>
</tfoot>
</table>
</html>推荐阅读
- floating-point - IEEE 754-2008 中规范 NaN 的限制
- amazon-web-services - AWS IoT：限制连接、来自设备的消息
- swift - 如何在 UIImage 上放大之前使 ScrollView 的高度和宽度保持不变？
- math - 排列组合示例的错误答案
- regex - 正则表达式：在开头或某些特殊字符之后匹配字符串
- javascript - 扩展以显示更多数字的小数点数字
- laravel - 当数组从laravel后端传递时，Vue js v-for不起作用
- java - 单元测试循环已运行特定次数
- pytorch - PyTorch 中的屏蔽和实例规范化
- python - 如何将Javascript的输出返回给python？