Разбивка HTML-таблицы при сохранении параметров фильтра - PullRequest
Новая
       3

Разбивка HTML-таблицы при сохранении параметров фильтра

0 голосов
/ 03 мая 2019

Для клиента мы делаем проект веб-страниц. Это включает в себя множество таблиц с еще большим количеством записей. Я ищу способ показа на стороне клиента только определенной части таблицы (будь то ТОП-100, записи за последний месяц, что-то в этом роде), но все записи должны быть доступны для использования поисковым фильтром.

Фильтр поиска, который я сейчас использую, это фильтр W3.JS (w3.htmlFilter), но при загрузке он все равно показывает более 500 записей.

Основная цель описана выше, но я бы также принял достойное решение, которое позволило бы мне отображать 10 записей, не теряя возможности фильтра.

Таблица заполняется с использованием foreach, который создает каждую запись на основе коллекции, предоставленной с помощью Razor.

Уже пытался установить максимальную высоту таблицы и задать переполнение по оси Y Уже пробовал показ: inline-block, но это уничтожило всю планировку. Уже пробовал некоторые JS, которые отображали только определенные записи, но означали, что я потерял доступ к неотображаемым записям (из-за Razor).

Для заполнения моих данных я использую эту бритву: 

@{
    var allFoo = db.GetFoos();
    var foosToShow = foos.Where(v => v.SomeCondition == true);
}

Фильтр, примененный к таблице: 

<input id="filter" oninput="w3.filterHTML('#foosTable', '.filterItem', this.value)" class="w3-input" placeholder="Search for foo..." />

фактически заполнение записей: 

<tbody>
 @foreach (Foo foo in foosToShow)
 {
 <tr class="filterItem" onclick="TransferElement(this)">
  <td>@foo.Prop1</td>
  <td>@foo.Prop2</td>
  <td>@foo.Prop3</td>
  <td>@foo.Prop4</td>
  <td>@foo.Prop5</td>
  <td>@foo.Prop6</td>
 </tr>
 }
</tbody>

Ожидаемый результат: Фильтруемый список длинных записей X, где можно установить X.

1 Ответ

1 голос
/ 03 мая 2019

Вот решение с использованием таблиц данных: 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<script>
var data = [
    [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh"
    ],
    [
        "Garrett Winters",
        "Director",
        "Edinburgh"
    ]
]
$(document).ready( function () {
    $('#table_id').DataTable( {
	data: data
	} );
} );
</script>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
			<th>City</th>
        </tr>
    </thead>
</table>
</body>
</html>

Единственное, что вам нужно изменить - это переменные данные в ваш массив с данными. Все работает без обработки на стороне сервера. Что вы также можете сделать: создайте файл getdata.php и используйте его в качестве источника данных, отобразив результат запроса в виде JSON.

Для получения дополнительной информации: https://datatables.net/manual/data/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...