Подтвердить что ты не робот

Сделать столбцы несортируемыми в dataTables.js плагине jQuery

Я использую плагин jQuery dataTables.js.

Первый столбец моей таблицы - это счетчик строк, поэтому я не хочу, чтобы он сортировался пользователем. В последнем столбце содержится ссылка на действие, которую пользователь может выполнять в строке. Как я могу сделать эти два столбца несортируемыми?

Примечание. Я использую режим конвейера (серверный процесс) для данных.

4b9b3361

Ответ 1

Это делается установкой bSortable на false:

/* Using aoColumnDefs */
$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumnDefs": [ 
            { "bSortable": false, "aTargets": [ 0 ] }
        ] } );
} );

/* Using aoColumns */
$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [ 
            { "bSortable": false },
            null,
            null,
            null,
            null
        ] } );
} );

Ответ 2

DataTables 1.10+ также поддерживает атрибуты стиля HTML5 data-, включая data-sortable="false", что делает столбец непригодным для сортировки:

<table>
    <thead>
        <tr>
            <th data-sortable="false">Row</th>
            <th>Name</th>
            <th>Join Date</th>
            <th>Organization</th>
            <th data-sortable="false">Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            [etc]
        </tr>
    </tbody>
</table>

Посмотрите эту демонстрацию в jsFiddle

Ответ 3

aaSortingFixed

Этот параметр в основном идентичен к параметру aaSorting, но не может быть отменено путем взаимодействия с пользователем стол. Это означает, что вы может иметь столбец (видимый или скрытый), который сортировка будет всегда сначала быть вынужденным - любая сортировка после что (от пользователя) будет выполняются по мере необходимости. Это может быть полезно для группировки строк вместе.

Пример использования:

$(document).ready( function() {
    $('#example').dataTable( {
         "aaSortingFixed": [[0,'asc'],[5,'asc']]
    } );
} );

0 - номер вашей строки "unsortable" (слева). (Итак, в этом примере фиксируются столбец первого и шестого порядков)

Официальная документация

Ответ 4

Вы можете определить функцию обратного вызова для поддержки номера неизменяемых номеров в отдельном столбце:

$('#someId').dataTable({
        // ...
        "aoColumns": [
            // ...
            {"bSortable": false}, // set unsortable this column
            // ...
        ],
        fnDrawCallback: function(oSettings) {
            $(this).find('tbody tr').each(function(index) {
                $(this).find('td').eq(1).text(index + 1); // .eq([index of column])
            });
        }
    });

Ответ 5

Существует несколько способов отключить сортировку по определенным столбцам.

Самый простой метод заключается в использовании параметра aoColumnDefs для настройки столбца (ов):

/*
 * aoColumnDefs must be an array of objects (definitions)
 * each definition must contain the aTargets property that 
 * specifies the columns on which the definition applies
 * and other properties such as bSortable, bSearchable, bVisible
 */
var aoColumnDefs = [
    {
        "aTargets": [0, 6],
        "bSortable": false
    }
];
var dataTable = $('#example').dataTable({
    "aoColumnDefs": aoColumnDefs
});

Другим, менее гибким вариантом является использование параметра aoColumn для настройки столбца (ов):

/*
 * aoColumn must be an array of objects
 * the array size must match the number of columns
 * use null to tell the plugin to use default settings for that column
 */
var aoColumns = [
    /* 0 */ { "bSortable": false },
    /* 1 */ null,
    /* 2 */ null,
    /* 3 */ null,
    /* 4 */ null,
    /* 5 */ null,
    /* 6 */ { "bSortable": false }
];
var dataTable = $('#example').dataTable({
    "aoColumns": aoColumns
});

Демо:

Документация: