#javascript #html #jquery #bootstrap-4 #datatables
#javascript #HTML #jquery #bootstrap-4 #таблицы данных
Вопрос:
У меня есть таблица с возможностью поиска в bootstrap datatables, которая отлично работает, за исключением моей неспособности разрешить пользователям выбирать, сколько строк они видят на странице. Прямо сейчас по умолчанию всего 10 результатов на страницу. Для простоты я включил только 3 строки, но я хотел бы знать, что я делаю неправильно, почему не отображается меню, позволяющее пользователям выбирать количество результатов на странице. В качестве альтернативы, если проще просто установить значение 50, я бы так и сделал. В любом случае, 10 не сокращает его.
Я сделал все возможное, чтобы добавить «lengthMenu»: [ 10, 25, 50, 75, 100 ] согласно документации Datatables, но я явно чего-то не хватает.
Итог: мне нужно либо (1), чтобы меню работало для выбора количества результатов на странице, либо (2) иметь возможность выбрать 50 для количества результатов на странице вместо 10 по умолчанию.
<head>
<title>Project Search</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel"=stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</div><div class="w3-content" style="max-width:2000px;margin-top:46px"><h1>Access Project Search<p><p></h1>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [ 10, 25, 50, 75, 100 ],
dom: 'Bfrtip',
"columnDefs": [
{
"targets": [ ],
"visible": false,
"searchable": false
},
{
"targets": [ ],
"visible": false
}
],
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function ( data, row, column, node ) {
var text = node.textContent;
return column === 10 ? text.replace( /Open$/, '' ).trim() : data;
}
}
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function ( data, row, column, node ) {
var text = node.textContent;
return column === 10 ? text.replace( /Open$/, '' ).trim() : data;
}
}
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function ( data, row, column, node ) {
var text = node.textContent;
return column === 10 ? text.replace( /Open$/, '' ).trim() : data;
}
}
}
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
exportOptions: {
columns: ':visible',
format: {
body: function ( data, row, column, node ) {
var text = node.textContent;
return column === 10 ? text.replace( /Open$/, '' ).trim() : data;
}
}
}
},
'colvis'
]
} );
} );
</script>
<style>
td.none {
display: none;
}
</style>
<style>
.modal {
max-width: 1000px;
margin: 2rem auto;
}
</style>
<style>
.display.dataTable {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
}
</style>
<style>
div.dt-button-collection {
width: 215px;
}
</style>
<table id="example" class="display">
<thead>
<tr>
<th class="all" data-toggle="tooltip" title="The known name of the project." >Project Name</th>
<th class="all" data-toggle="tooltip" title="The provided unique ID that distinguishes projects.">Project Number</th>
<th class="all" data-toggle="tooltip" title="The conclusing time point of a project, which is sometimes, but not always the point at which funding ends.">End Date</th>
<th class="all" data-toggle="tooltip" title="The primary funder of the project.">Funder</th>
<th class="all" data-toggle="tooltip" title="A brief description on the scope and aims of a project.">Abstract</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project 1</td>
<td>P-1</td>
<td>2018-04-30 00:00:00</td>
<td>NIH</td>
<td><div id="ex83"class="modal">
<p>
Abstract 1 <a href="#" rel="modal:close"></a>
</div>
<p><a href="#ex83" rel="modal:open"><button class="button">Open<span></span></button></a></p></td></tr>
<tr>
<td>Project 2</td>
<td>P-2</td>
<td>2024-03-31 00:00:00</td>
<td>NIH</td>
<td><div id="ex103"class="modal">
<p>
Abstract 2 <a href="#" rel="modal:close"></a>
</div>
<p><a href="#ex103" rel="modal:open"><button class="button">Open<span></span></button></a></p></td></tr>
<tr>
<td>Project 3</td>
<td>P-3</td>
<td>2021-01-31 00:00:00</td>
<td>NIH</td>
<td><div id="ex111"class="modal">
<p> Abstract 3</p>
<a href="#" rel="modal:close"></a>
</div>
<p><a href="#ex111" rel="modal:open"><button class="button">Open<span></span></button></a></p></td></tr>
</tbody>
</table>
Ответ №1:
Это из-за вашей dom: 'Bfrtip', опции. Добавьте l (букву l) в его список или вообще удалите dom опцию, если она вам не нужна, и просто используйте макет по умолчанию.
Смотрите здесь для получения подробной информации, объясняющей, что означают все буквы.