Объяснение использования плагина jQuery.datatables.js и примеры API

1、дефолтная конфигурация DataTables

$.document.ready(function() {
$('#example').dataTable();
});

Пример:http://www.guoxk.com/html/DataTables/Zero-configuration.html

2、основные параметры конфигурации DataTables

"bPaginate": true, //функция перелистывания
"bLengthChange": true, //изменение количества отображаемых данных на странице
"bFilter": true, //функция фильтрации
"bSort": false, //функция сортировки
"bInfo": true,//информация в подножке
"bAutoWidth": true//автоматическая ширина

Пример:http://www.guoxk.com/html/DataTables/Feature-enablement.html

3、сортировка данных

$.document.ready(function() {
$('#example').dataTable({
"aaSorting": [
[ 4, "desc" ]
]
});
});

начиная с 0-го столбца, сортировка по убыванию по 4-му столбцу

Пример:http://www.guoxk.com/html/DataTables/Sorting-data.html

4、сортировка по нескольким столбцам

Пример:http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

5、скрытие некоторых столбцов

$.document.ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }
{"bVisible": false, "aTargets": [ 3 ]}"
] });
});

Пример:http://www.guoxk.com/html/DataTables/Hidden-columns.html

6、改变页面上元素的位置

$.document.ready(function() {
$('#example').dataTable({
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
});
});
//l- 每页显示数量
//f – 过滤输入
//t – 表单Table
//i – 信息
//p – 翻页
//r – pRocessing
//< and > – div elements
//<"class" and > – div with a class
//Examples: <"wrapper"flipt>, <lf<t>ip>

Пример:http://www.guoxk.com/html/DataTables/DOM-positioning.html

7、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。

$.document.ready(function() {
$('#example').dataTable({
"bStateSave": true
});
});

Пример:http://www.guoxk.com/html/DataTables/State-saving.html

8、显示数字的翻页样式

$.document.ready(function() {
$('#example').dataTable({
"sPaginationType": "full_numbers"
});
});

Пример:http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9、水平限制宽度

$.document.ready(function() {
$('#example').dataTable({
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
});
});

Пример:http://www.guoxk.com/html/DataTables/Horizontal.html

10、垂直限制高度

Пример:http://www.guoxk.com/html/DataTables/Vertical.html

11、水平和垂直两个方向共同限制

Пример:http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12、改变语言

$.document.ready(function() {
$('#example').dataTable({
"oLanguage": {
"sLengthMenu": "Показывать _MENU_ записей на странице"
"sZeroRecords": "Извините, данные не найдены"
"sInfo": "С _START_ по _END_ из _TOTAL_ записей"
"sInfoEmpty": "Нет данных"
"sInfoFiltered": "(Из _MAX_ записей найдено)"
"oPaginate": {
"sFirst": "Первая страница",
"sPrevious": "Предыдущая страница",
"sNext": "Следующая страница",
"sLast": "Последняя страница"
}
"sZeroRecords": "Не найдено данных",
"sProcessing": "<img src=\'#\'" /loading.gif"
}
});
});

Пример:http://www.guoxk.com/html/DataTables/Change-language-information.html

13. Событие click

Пример:http://www.guoxk.com/html/DataTables/event-click.html

14. Использование плагина tooltip

Пример:http://www.guoxk.com/html/DataTables/tooltip.html

15. Определение количества данных на странице

$.document.ready(function() {
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
});

Пример:http://www.guoxk.com/html/DataTables/length_menu.html

16. row callback

Пример:http://www.guoxk.com/html/DataTables/RowCallback.html

Значение в последней колонке, если это "A", отображается жирным шрифтом

17. Управление сортировкой

$.document.ready(function() {
$('#example').dataTable({
"aoColumns": [
null,
{ "asSorting": ["asc"] },
{ "asSorting": ["desc", "asc", "asc"] },
{ "asSorting": [] },
{ "asSorting": [] }
]
});
});

Пример:http://www.guoxk.com/html/DataTables/sort.html

Описание: Первая колонка при нажатии сортируется по умолчанию, вторая колонка уже отсортирована, третья колонка сортируется в обратном порядке, вторая и третья колонки сортируются по порядку, четвертая и пятая колонки не сортируются

18. Чтение языковой пакета из конфигурационного файла

$.document.ready(function() {
$('#example').dataTable({
"oLanguage": {
"sUrl": "cn.txt"
}
});
});

19. Использование AJAX источника

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true
"sAjaxSource": './arrays.txt'
});
});

Пример:http://www.guoxk.com/html/DataTables/ajax.html

20. Обработка данных на сервере с использованием AJAX

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true
"bServerSide": true
"sPaginationType": "full_numbers"
"sAjaxSource": "./server_processing.php"
/* Если добавить следующий фрагмент, то данные будут передаваться по методу POST */
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json'
"type": "POST"
"url": sSource
"data": aoData
"success": fnCallback
});
}
"oLanguage": {
"sUrl": "cn.txt"
}
"aoColumns": [
{"sName": "platform"},
{"sName": "version"},
{"sName": "engine"},
{"sName": "browser"},
{"sName": "grade"}
//$_GET['sColumns'] будет получать данные из aoColumns
});
});

Пример:http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21. Загрузка id и class для каждой строки

Формат данных, возвращаемых сервером:

{
"DT_RowId": "row_8",
"DT_RowClass": "gradeA",
"0": "Gecko",
"1": "Firefox 1.5",
"2": "Win 98+ / OSX.2+",
"3": "1.8",
"4": "A"
}

Пример:http://www.guoxk.com/html/DataTables/add_id_class.html

22. Показывать детальную информацию для каждой строки, чтобы показать детали, нажмите на «+» в начале строки.

Пример:http://www.guoxk.com/html/DataTables/with-row-information.html

23. Выбор多条

Пример:http://www.guoxk.com/html/DataTables/selectRows.html

22. Интеграция плагина jQuery jEditable

Пример:http://www.guoxk.com/html/DataTables/jEditable-integration.html

Дополнительные参考资料:

Важно отметить, что table объект, который будет обрабатываться dataTable, должен иметь thead и tbody, и структура должна быть регулярной (данные не обязательно должны быть полными), только这样才能 быть обработан правильно.

Следующие параметры могут быть добавлены при绑定 dataTable:

Как уже было сказано, я хочу представить вам использование плагина jQuery.datatables.js и примеры API, надеюсь, это поможет вам. Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий, я отвечу вам своевременно. Вновь благодарю всех за поддержку сайта呐喊教程!

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, сайт не имеет права собственности, не был обработан редакторами, не несет ответственности за соответствующие юридические последствия. Если вы обнаружите содержимое,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении,并提供 соответствующие доказательства. Если будет установлено, что содержимое нарушает авторские права, сайт немедленно удалит涉嫌侵权的内容。