DataTables - мне не нужны параметры поиска/фильтрации и длины в некоторых таблицах

Как инициализировать определенные таблицы без фильтра поиска и меню выбора длины?

Очевидно, это можно сделать с помощью опции sDom, но документация довольно плохая, и я не могу точно понять, что я должен делать.

http://datatables.net/usage/options#sDom


jquery-datatables
person BadHorsie    schedule 13.11.2012    source источник

Ответы (4)


arrow_upward
91
arrow_downward

Вы можете установить в false такие свойства во время инициализации datatable:

"bFilter" : false,               
"bLengthChange": false
person Smiter    schedule 13.11.2012
comment
Мэтт, ты совершенно не прав. Добавив "lengthMenu": [[...], [....]] и изменив значение этого параметра, вы можете показать столько элементов, сколько захотите. Например, вы можете программно отобразить 20 или 30 элементов, а также исчезнет поле отображения метки и раскрывающегося списка (которое обычно появляется, если вы не используете "bLengthChange": false). - person Md. Mahamudul Hasan Khan; 29.07.2015

arrow_upward
22
arrow_downward

Начиная с Datatables 1.10, вы можете использовать эти 2 варианта:

Полный пример:

$('#example').dataTable( {
  "lengthChange": false,
  "searching": false
} );
person Guy    schedule 25.08.2016

arrow_upward
5
arrow_downward

Без фильтра поиска и длины

var options = {"sDom": 'rtip'}
var myDataTable = $('#myDataTable')  
myDataTable.dataTable(options)

Вот пример из официальной документации: https://datatables.net/examples/basic_init/dom.html

person Vadym Tyemirov    schedule 14.02.2014

arrow_upward
3
arrow_downward

Я согласен, что сДом хитрый, я наловчился на практике. Запустите приведенный ниже пример и увидите, что «информация» появится вверху. Замените sDom на «sDom»: «rtlp», и информация исчезнет. Теперь используйте «sDom»: «rtil», и вы увидите, что информация вернулась внизу, но пейджинг исчез. Продолжайте экспериментировать, и у вас все получится.

<!DOCTYPE html>
<html>
 <head>
    <link href="demo_table.css" rel="stylesheet">
</head>
<body>
<table class="display dataTable" id="example">
    <thead>
        <tr role="row">
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
</table>
<script src="jquery.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#example').dataTable( {
            "aaData": [
                [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
                [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
                [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
            ],
            "sDom": '<"top"i>rtlp'
        } ); 
    } );
</script>       
</body>
</html>
person Matt Shirilla    schedule 22.11.2012