我想知道为什么下面不能使用$(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>