我在一页上有2个表格。两者都可以通过下拉菜单选择字段数。
我在每个表单上使用相同的JQuery和本质上相同的HTML，并且略微更改了表单ID，但这似乎无济于事。
getPagination('#table-id');
jQuery('#maxRows').trigger('change');
function getPagination(table) {
jQuery('#maxRows').on('change', function() {
jQuery('.pagination').html(''); // reset pagination div
var trnum = 0; // reset tr counter
var maxRows = parseInt(jQuery(this).val()); // get Max Rows from select option
var totalRows = jQuery(table + ' tbody tr').length; // numbers of rows
jQuery(table + ' tr:gt(0)').each(function() { // each TR in table and not the header
trnum++; // Start Counter
if (trnum > maxRows) { // if tr number gt maxRows
jQuery(this).hide(); // fade it out
}
if (trnum <= maxRows) {
jQuery(this).show();
} // else fade in Important in case if it ..
}); // was fade out to fade it in
if (totalRows > maxRows) { // if tr total rows gt max rows option
var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..
// numbers of pages
for (var i = 1; i <= pagenum;) { // for each page append pagination li
jQuery('.pagination').append('<li data-page="' + i + '">\
<span>' + i++ + '<span class="sr-only">(current)</span></span>\
</li>').show();
} // end for i
} // end if row count > max rows
jQuery('.pagination li:first-child').addClass('active'); // add active class to the first li
//SHOWING ROWS NUMBER OUT OF TOTAL DEFAULT
showig_rows_count(maxRows, 1, totalRows);
//SHOWING ROWS NUMBER OUT OF TOTAL DEFAULT
jQuery('.pagination li').on('click', function(e) { // on click each page
e.preventDefault();
var pageNum = jQuery(this).attr('data-page'); // get it's number
var trIndex = 0; // reset tr counter
jQuery('.pagination li').removeClass('active'); // remove active class from all li
jQuery(this).addClass('active'); // add active class to the clicked
//SHOWING ROWS NUMBER OUT OF TOTAL
showig_rows_count(maxRows, pageNum, totalRows);
//SHOWING ROWS NUMBER OUT OF TOTAL
jQuery(table + ' tr:gt(0)').each(function() { // each tr in table not the header
trIndex++; // tr index counter
// if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) {
jQuery(this).hide();
} else {
jQuery(this).show();
} //else fade in
}); // end of for each tr in table
}); // end of on click pagination list
});
// end of on select change
// END OF PAGINATION
}
// All Table search script
function FilterkeyWord_all_table() {
// Count td if you want to search on all table instead of specific column
var count = jQuery('.table').children('tbody').children('tr:first-child').children('td').length;
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("search_input_all");
var input_value = document.getElementById("search_input_all").value;
filter = input.value.toLowerCase();
if (input_value != '') {
table = document.getElementById("table-id");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 1; i < tr.length; i++) {
var flag = 0;
for (j = 0; j < count; j++) {
td = tr[i].getElementsByTagName("td")[j];
if (td) {
var td_text = td.innerHTML;
if (td.innerHTML.toLowerCase().indexOf(filter) > -1) {
//var td_text = td.innerHTML;
//td.innerHTML = 'shaban';
flag = 1;
} else {
//DO NOTHING
}
}
}
if (flag == 1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
} else {
//RESET TABLE
jQuery('#maxRows').trigger('change');
}
}
getPagination('#table-id2');
jQuery('#maxRows2').trigger('change');
function getPagination(table) {
jQuery('#maxRows2').on('change', function() {
jQuery('.pagination').html(''); // reset pagination div
var trnum = 0; // reset tr counter
var maxRows2 = parseInt(jQuery(this).val()); // get Max Rows from select option
var totalRows = jQuery(table + ' tbody tr').length; // numbers of rows
jQuery(table + ' tr:gt(0)').each(function() { // each TR in table and not the header
trnum++; // Start Counter
if (trnum > maxRows2) { // if tr number gt maxRows2
jQuery(this).hide(); // fade it out
}
if (trnum <= maxRows2) {
jQuery(this).show();
} // else fade in Important in case if it ..
}); // was fade out to fade it in
if (totalRows > maxRows2) { // if tr total rows gt max rows option
var pagenum = Math.ceil(totalRows / maxRows2); // ceil total(rows/maxrows2) to get ..
// numbers of pages
for (var i = 1; i <= pagenum;) { // for each page append pagination li
jQuery('.pagination').append('<li data-page="' + i + '">\
<span>' + i++ + '<span class="sr-only">(current)</span></span>\
</li>').show();
} // end for i
} // end if row count > max rows
jQuery('.pagination li:first-child').addClass('active'); // add active class to the first li
//SHOWING ROWS NUMBER OUT OF TOTAL DEFAULT
showig_rows_count(maxRows2, 1, totalRows);
//SHOWING ROWS NUMBER OUT OF TOTAL DEFAULT
jQuery('.pagination li').on('click', function(e) { // on click each page
e.preventDefault();
var pageNum = jQuery(this).attr('data-page'); // get it's number
var trIndex = 0; // reset tr counter
jQuery('.pagination li').removeClass('active'); // remove active class from all li
jQuery(this).addClass('active'); // add active class to the clicked
//SHOWING ROWS NUMBER OUT OF TOTAL
showig_rows_count(maxRows2, pageNum, totalRows);
//SHOWING ROWS NUMBER OUT OF TOTAL
jQuery(table + ' tr:gt(0)').each(function() { // each tr in table not the header
trIndex++; // tr index counter
// if tr index gt maxRows2*pageNum or lt maxRows2*pageNum-maxRows2 fade if out
if (trIndex > (maxRows2 * pageNum) || trIndex <= ((maxRows2 * pageNum) - maxRows2)) {
jQuery(this).hide();
} else {
jQuery(this).show();
} //else fade in
}); // end of for each tr in table
}); // end of on click pagination list
});
// end of on select change
// END OF PAGINATION
}
//ROWS SHOWING FUNCTION
function showig_rows_count(maxRows2, pageNum, totalRows) {
//Default rows showing
var end_index = maxRows2 * pageNum;
var start_index = ((maxRows2 * pageNum) - maxRows2) + parseFloat(1);
var string = 'Showing ' + start_index + ' to ' + end_index + ' of ' + totalRows + ' entries';
jQuery('.rows_count').html(string);
}
// All Table search script
function FilterkeyWord_all_table() {
// Count td if you want to search on all table instead of specific column
var count = jQuery('.table').children('tbody').children('tr:first-child').children('td').length;
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("search_input_all");
var input_value = document.getElementById("search_input_all").value;
filter = input.value.toLowerCase();
if (input_value != '') {
table = document.getElementById("table-id2");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 1; i < tr.length; i++) {
var flag = 0;
for (j = 0; j < count; j++) {
td = tr[i].getElementsByTagName("td")[j];
if (td) {
var td_text = td.innerHTML;
if (td.innerHTML.toLowerCase().indexOf(filter) > -1) {
//var td_text = td.innerHTML;
//td.innerHTML = 'shaban';
flag = 1;
} else {
//DO NOTHING
}
}
}
if (flag == 1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
} else {
//RESET TABLE
jQuery('#maxRows2').trigger('change');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST">
<div class="col-md-12 collection colwrapper">
<div class="colelement">
<div class="container">
<div class="header_wrap">
<div class="num_rows">
<div class="form-group">
<!-- Show Numbers Of Rows -->
<select class="form-control" name="state" id="maxRows">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
</div>
<table class="table table-striped table-class" id="table-id">
<thead>
<tr>
<th style="width:100%;">Collections</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> One
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Two
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Three
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Four
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Five
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Six
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Seven
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Eight
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Nine
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Ten
</label>
</div>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12 deldeets delwrapper">
<div class="delelement">
<div class="col-md-12 deldeets delwrapper">
<div class="delelement">
<div class="container">
<div class="header_wrap">
<div class="num_rows">
<div class="form-group">
<!-- Show Numbers Of Rows -->
<select class="form-control" name="state" id="maxRows2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
</div>
<table class="table table-striped table-class" id="table-id2">
<thead>
<tr>
<th style="width:100%;">Deliveries</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> One
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Two
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Three
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Four
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Five
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Six
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Seven
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Eight
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Nine
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Ten
</label>
</div>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</form>
从上面的代码中您将看到HTML和JQuery几乎相同。我将底部HTML代码段中的id从“ table-id”更改为“ table-id2”，并在JQuery中将其复制了，并将“ maxrow”复制为“ maxrow2”
尽管您将看到，如果运行代码，则顶部下拉菜单将不执行任何操作，而底部下拉菜单将控制这两种形式。
可能是一个简单的修复程序，但是我看不到需要更改的内容。任何帮助都很好
让我感到困惑的是它的下拉列表，其中我在似乎可以控制两个表的ID后面添加了“ 2”。我曾想过，如果有的话，原始ID会起作用
答案 0 :(得分：0)
这个简单的代码呢？也许这可以帮助您。
// this is a VERY basic state management object
// I initialized it with 1 (not 0, as for array numbers), because
// it shows "how many tds I want to display"
const tableRows = {
table1: 1,
table2: 1
}
function showRows(tableId, numRows) {
// I edited the selector, it controls tds now, not divs
jQuery(tableId + " tbody tr td").each(function(index, item) {
if (index + 1 > numRows) {
jQuery(item).css("display", "none");
} else {
jQuery(item).css("display", "block");
}
});
}
// these two functions display the initially displayed tds
showRows('#table-id', tableRows.table1);
showRows('#table-id2', tableRows.table2);
// this controls the first table's tds
jQuery("#maxRows").on('change', function(e) {
tableRows.table1 = parseInt($(this).val(), 10);
showRows("#table-id", tableRows.table1);
});
// this controls the second table's tds
jQuery("#maxRows2").on('change', function(e) {
tableRows.table2 = parseInt($(this).val(), 10);
showRows("#table-id2", tableRows.table2);
});/* I added this CSS classes so the base state of the
tds are "hidden" and not "displayed", so it doesn't
flicker on startup */
#table-id tbody tr td,
#table-id2 tbody tr td {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST">
<div class="col-md-12 collection colwrapper">
<div class="colelement">
<div class="container">
<div class="header_wrap">
<div class="num_rows">
<div class="form-group">
<!-- Show Numbers Of Rows -->
<select class="form-control" name="state" id="maxRows">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
</div>
<table class="table table-striped table-class" id="table-id">
<thead>
<tr>
<th style="width:100%;">Collections</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> One
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Two
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Three
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Four
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Five
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Six
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Seven
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Eight
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Nine
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Ten
</label>
</div>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12 deldeets delwrapper">
<div class="delelement">
<div class="col-md-12 deldeets delwrapper">
<div class="delelement">
<div class="container">
<div class="header_wrap">
<div class="num_rows">
<div class="form-group">
<!-- Show Numbers Of Rows -->
<select class="form-control" name="state" id="maxRows2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
</div>
<table class="table table-striped table-class" id="table-id2">
<thead>
<tr>
<th style="width:100%;">Deliveries</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> One
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Two
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Three
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Four
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Five
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Six
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Seven
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Eight
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Nine
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="col-md-12 special-hidden_fields">
<label> Ten
</label>
</div>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</form>
请注意非常基本的状态管理对象（const tableRows = {}）-当您要根据显示的行将数据上载到服务器时，这可能会派上用场。