#javascript #html #html-table
Вопрос:
Я хочу иметь возможность использовать селектор столбцов, чтобы указать, в каком столбце таблицы искать входное значение (сейчас он выполняет правильный поиск, и селектор правильно выбирает столбец, но он выполняет поиск по всей таблице, и я не уверен, как указать столбец для поиска).
Затем, когда строка с этим значением будет получена, я хочу также отобразить другие строки, которые имеют тот же FID, что и строка поиска. Я не группировал строки с помощью нескольких тегов tbody, а вместо этого присвоил строке заголовка группы класс «gpRep» и использовал это назначение класса для цветового кодирования и переключения групп FID. Спасибо.
scripts.js
//********************** START FILTER AND SEARCH FUNCTIONS ************************
// allFunds.php: start fundSearchColumn() . . . selects column to search in
function fundSearchColumn(){
var column = $("#fund_column_selector option:selected").val().toLowerCase();
return column
}
// end fundSearchColumn()
// // **** not sure how to tell it what column to search in (from function above) ***
// // https://www.geeksforgeeks.org/how-to-perform-a-real-time-search-and-filter-on-a-html-table/
$(document).ready(function() {
$("#fund_search_term").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#all_funds_table tbody tr").filter(function() {
$(this).toggle($(this).text()
.toLowerCase().indexOf(value) > -1)
});
});
});
//********************** END FILTER AND SEARCH FUNCTIONS ************************
allFunds.php
<!-- start all funds table div-->
<div id="all_funds_table_div">
<h4>All Funds</h4>
<!-- column selector for table search -->
<select id="fund_column_selector" onchange='fundSearchColumn()'>
<option value="2">LID</option>
<option value="7">Code</option>
</select>
<input type="text" id="fund_search_term" placeholder="search by column"/>
<button onclick='clearFilters()'>Clear Filters</button>
<!-- end column selector for table search -->
<br>
<br>
<div id="hidden_columns_label">
<p id="toggle_rows_label">Toggle Rows <i id="toggle_rows_arrow" class="arrow right"></i></p>
<p><i id="toggle_columns_arrow" class="arrow right"></i></p>
</div>
<?php
// open connection
include_once("c_connection.php");
// query all funds and get reps as of a specific date
$sql = "select if(rep_date_in is not null and rep_date_out is null, 1, 0) as ng,
FID, lid, datastream, ric, lipper_permid, isin, code, name,Yahoo, start_date,end_date, rep_date_in, rep_date_out,
last_aum, rep_aum, yahoo, Ck_date, Ck_person FROM fv_fund
order by FID, ng desc, rep_date_in desc, rep_date_out is null, rep_date_out desc, lid;";
$result = $connection->query($sql);
?>
<!-- start all funds table -->
<table id="all_funds_table" data-role="table" data-mode="columntoggle" class="table table-sm">
<thead>
<tr>
<th index=0>ng</th>
<th index=1>FID</th>
<th index=2>Lid</th>
<th index=3>Datastream</th>
<th index=4>RIC</th>
<th index=5>Lipper Permid</th>
<th index=6>ISIN</th>
<th index=7>Code</th>
<th index=8>Name</th>
<th index=9>Yahoo</th>
<th index=10>Start Date</th>
<th index=11>End Date</th>
<th index=12>Rep In</th>
<th index=13>Rep Out</th>
<th index=14>Last AUM</th>
<th index=15>Rep AUM</th>
<th index=16>Status</th>
<th index=17>Ck Date</th>
<th index=18>Ck Person</th>
</tr>
</thead>
<tbody>
<?php
if ($result = $connection->query($sql)) {
$odd = false;
while ($row = $result->fetch_assoc()) {
if ($row['ng'] == 1) {
$odd = !$odd;
} // end if ($row['ng'] == 1)
?>
<!-- assign classes of gpRep/collapse to only display rows with ng = 1 and classes of odd/even to color rows by FID -->
<tr class="<?php echo ($row['ng'] == 1) ? "gpRep" : "collapse"; ?> <?php echo ($odd) ? "odd": "even"; ?>">
<td style = "text-align: center"><?= $row['ng'] ?></td>
<td style = "text-align: center"><a href="group.php?FID=<?php echo $row['FID']; ?>"><?= $row['FID'] ?></a></td>
<td style = "text-align: center"><a href="fund.php?lid=<?php echo $row['lid']; ?>"><?= $row['lid'] ?></a></td>
<td style = "text-align: center"><?= $row['datastream'] ?></td>
<td style = "text-align: center"><?= $row['ric'] ?></td>
<td style = "text-align: center"><?= $row['lipper_permid'] ?></td>
<td style = "text-align: center"><?= $row['isin'] ?></td>
<td style = "text-align: center"><?= $row['code'] ?></td>
<td style = "text-align: center"><?= $row['name'] ?></td>
<td style = "text-align: center"><?= $row['yahoo'] ?></td>
<td style = "text-align: center"><?= $row['start_date'] ?></td>
<td style = "text-align: center"><?= $row['end_date'] ?></td>
<td style = "text-align: center"><?= $row['rep_date_in'] ?></td>
<td style = "text-align: center"><?= $row['rep_date_out'] ?></td>
<td style = "text-align: center"><?= $row['last_aum'] ?></td>
<td style = "text-align: center"><?= $row['rep_aum'] ?></td>
<td style = "text-align: center"><?= $row['status'] ?></td>
<td style = "text-align: center"><?= $row['Ck_date'] ?></td>
<td style = "text-align: center"><?= $row['Ck_person'] ?></td>
</tr>
<?php
} // end while
$result->free();
} // end if
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$connection->close();
?>
<!-- close connection -->
</tbody>
</table>
<!-- end all funds table -->
</div>
<!-- end all funds table div-->
Ответ №1:
В итоге я собрал код из нескольких разных мест и понял это. Я также добавил функцию отображения частичных результатов поиска, чтобы строки продолжали фильтроваться до тех пор, пока вы не введете последний символ. Когда это происходит, отображаются все строки, принадлежащие группе результатов поиска (т. е. у них один и тот же идентификатор). Вот javascript, который я использовал. Никаких изменений в html.
scripts.js
//********************** START FILTER AND SEARCH FUNCTIONS ************************
// allFunds.php: start fundSearchColumn() . . . selects column to search in
function fundSearchColumn(){
var column = $("#fund_column_selector option:selected").val().toLowerCase();
return column
}
// end fundSearchColumn()
// start function to search allFunds table by lid or code and display all rows of that group FID
$(document).ready(function() {
// start $("#fund_search_term").on("keyup", function() {
$("#fund_search_term").on("keyup", function() {
$("#all_funds_table tbody tr").hide();
var searchValue = $(this).val().toLowerCase();
// *** start this is needed to display partial matching results
$("#all_funds_table tbody tr").filter(function() {
$(this).toggle($(this).find('td').eq( fundSearchColumn() ).text()
.toLowerCase().indexOf(searchValue) > -1)
}); // *** end this is needed to display partial matching results
// start $('#all_funds_table tbody tr').each(function()
$('#all_funds_table tbody tr').each(function(){
// start this is needed to get searchFID once an exact match has been found
if($(this).find('td').eq( fundSearchColumn() ).text().toLowerCase() == searchValue){
var searchRow = $(this);
$(this).show();
var searchFID = searchRow.find('td').eq( 1 ).text().toLowerCase();
}// end this is needed to get searchFID once an exact match has been found
// start second loop to display all rows of FID group
$('#all_funds_table tbody tr').each(function(){
// start if($(this).find('td').eq( 1 ).text().toLowerCase() == searchFID){
if($(this).find('td').eq( 1 ).text().toLowerCase() == searchFID){
$(this).show();
} // end if($(this).find('td').eq( 1 ).text().toLowerCase() == searchFID){
}); // end second loop to display all rows of FID group
}); // end $('#all_funds_table tbody tr').each(function()
// start check if search field is empty in order to refresh page
if (searchValue == ""){
location.reload();
} // end check if search field is empty in order to refresh page
}); // end $("#fund_search_term").on("keyup", function() {
}); // end function to search allFunds table by lid or code and display all rows of that group FID
// allFunds.php: start clearFilters()
function clearFilters(){
location.reload();
}
// end clearFilters()
//********************** END FILTER AND SEARCH FUNCTIONS ************************