Создание динамических таблиц за секунды из любых данных JSON

Сортировка

Сортировка включена по умолчанию для всех столбцов, щелкнув заголовок любого столбца, можно отсортировать данные по этому столбцу.

Сортировка может быть включена или отключена для каждого столбца с использованием параметра сортировки.

 sortable

По умолчанию все столбцы сортируются как текст. Вы можете указать другой сортировщик с параметром $("#example-table").tabulator({
columns:[
{title:"Name", field:"name", sortable:true}, //sorting enabled
{title:"Progress", field:"progress", sortable:false}, //sorting disabled
],
});


 sorter

Доступно несколько встроенных сортировщиков:

• строка — сортирует как строки символов (опция по умолчанию)
• число — Сортирует как числа (целое или с плавающей точкой, также будет обрабатывать числа с использованием разделителей «,»)
• alphanum — сортирует как буквенно-цифровую строку
• логическое — сортирует как логическое
• дата — сортировка по дате

Чтобы определить пользовательский сортировщик, передайте обратный вызов параметру $("#example-table").tabulator({
columns:[
{title:"Name", field:"name", sortable:true}, //sort as string (default)
{title:"Progress", field:"progress", sortable:true, sorter:"number"}, //sort as number
],
});
Он должен возвращать разницу между двумя сравниваемыми значениями.

 sorter

Форматирование

С Tabulator вы не привязаны к отображению ваших данных в виде простого текста. Используя средства форматирования, вы можете решить, как вы хотите, чтобы каждый столбец выглядел.

Разнообразие встроенных форматеров включены:

• открытый текст — отображение значения ячейки в виде текста. (опция по умолчанию)
• textarea — показывает текст с неповрежденными символами возврата каретки
• деньги — форматирует число в обозначение валюты (например, 1234567.8901 -> 1 234 567,89)
• email — отображает данные как якорь с ссылкой mailto: на указанное значение
• link — отображает данные как якорь со ссылкой на данное значение
• галочка — зеленая галочка, если значение равно (true | ‘true’ | ‘True’ | 1) и пустая ячейка, если нет
• tickCross — зеленая галочка, если значение равно (true | ‘true’ | ‘True’ | 1) и красный крестик, если нет
• звезда — графический рейтинг звезды, основанный на целочисленных значениях
• прогресс — индикатор выполнения, который заполняет ячейку слева направо (используя значения 0-100 в процентах от ширины)

Вы можете установить форматер столбца с помощью параметра var customSorter = function(a, b, aData, bData){
//a and b are the two values being compared
//aData and bData are the row objects for the values being compared (useful if you need to access additional fields in the row data for the sort)

$("#example-table").tabulator({
columns:[
{title:"Progress", field:"progress", sortable:true, sorter:customSorter},
],
});


 formatter

Чтобы определить пользовательский форматер, передайте обратный вызов параметру $("#example-table").tabulator({
columns:[
{title:"Progress", field:"progress", formatter:"progress" },
],
});
Обратный вызов должен возвращать HTML, который будет отображаться в ячейке.

 formatter

фильтрация

Часто бывает, что вам нужно отображать только подмножество данных для ваших пользователей. Вы можете фильтровать данные, используя функцию var customFormatter = function(value, data, cell, row, options, formatterParams){
//value - value of the cell
//data - data for the row the cell is in
//cell - DOM element of the cell
//row - DOM element of the row
//options - options set for this tabulator
//formatterParams - parameters set for the column

$("#example-table").tabulator({
columns:[
{title:"Progress", field:"progress", formatter:customFormatter},
],
});


 setFilter

Функция принимает три аргумента: поле для фильтрации, функцию сравнения (=, <, <=,>,> =,! =, Like) и значение фильтра.

Чтобы выполнить более сложный фильтр, вы можете передать обратный вызов в функцию $("#example-table").tabulator("setFilter", "progress", ">", 10);
Обратный вызов должен возвращать логическое значение, причем значение setFilter

 true

Очистите существующие фильтры с var customFilter = (data){
//data - data for the row being filtered

$("#example-table").tabulator("setFilter", customFilter);
clearFilter

 $("#example-table").tabulator("clearFilter");

 $("#example-table").tabulator({
  columns:[
    {title:"Progress", field:"progress", formatter:"progress", editable:true},
  ],
});

 $("#example-table").tabulator({
   columns:[
    {title:"Progress", field:"progress", formatter:"progress", editable:true, editor:"number"},
  ],
});

 var customEditor = function(cell, value, data){
  //cell - JQuery object for current cell
  //value - current value for current cell
  //data - data for the current row

  //create and style editor
  var editor = $("<select><option value=''></option><option value='male'>male</option><option value='female'>female</option></select>");

  editor.css({
    "padding":"3px",
    "width":"100%",
    "box-sizing":"border-box",
  });

  //set value of editor to the current value of the cell
  editor.val(value);

  //when the value has been set, trigger the cell to update
  editor.on("change blur", function(e){
    cell.trigger("editval", editor.val());
  });

  //return the editor element
  return editor;
}

$("#example-table").tabulator({
  columns:[
    {title:"Gender", field:"gender", editable:true, editor:customEditor},
  ],
});

 var data = $("#example-table").tabulator("getData");