DataTables е плъгин за jQuery javascript библиотека, сортиране на таблици и страниране -

DataTablesе плъгин за jQuery javascript библиотеката. Инструментът е много гъвкав и ви позволява да правите разширено взаимодействие между HTML таблици.

Първоизточникът е като http://www.datatables.net/ И той стана като платено копеле в новите версии, публикува каквото работи и безплатно

Ще добавя няколко статии от различни източници, започвайки с най-добрите

Използвам прекрасния плъгин за таблици с данни от дълго време. В един прекрасен момент възникна въпросът за филтриране и сортиране на данни, чийто тип се различава от стандартните (низ, число, html и др.). Проблемът се решава доста бързо - достатъчно беше внимателно четене на документацията и малко въображение.

Състояние.

Има таблица с три колони - само низ, размер на файл/папка и брой дискове. Необходимо е да се даде възможност за сортиране и филтриране по всяка колона (за 2-ра и трета колона е необходимо да се направи филтриране по условията , =). Трябва също да филтрирате по няколко колони.

Решение.

За тестове нека създадем набор от данни под формата на масив:

Сега нека инициализираме създаването на dataTable:

Тук посочваме източника на данни (aaData), типове колони (честотна лента - тип "персонализиран"). За останалите параметри можете да прочетете в офиса. документация. Нека създадем основно оформление на таблицата:

Веднага създадохме три полета за филтриране на данни. Трябва да окачите манипулатори за въвеждане на текст върху тях:

За принудително филтриране се извиква методът fnFilter. Първият параметър е желаната стойност, а вторият е номера на колоната, в която търсим. Тъй като стандартното филтриране се използва за колоната OS, стойността от полето #os_filter се предава на функцията fnFilter. За честотната лента на колоните, count ще напишем наши собствени филтри, така че в стандартната функцияпредаване на празна стойност. Тъй като нашият метод ще бъде извикан след стандартния, тогава трябва да вземем целия набор от данни от колоната, а не обработения.

Нашите методи трябва да бъдат включени в дизайна (вижте документ):

Нека декларираме нашите филтри:

В цикъл ще преминем през целия този масив и ще проверим типа данни с типа в масива inputFilters:

Сега нека опишем функциите bandwidthFilter и countFilter.

По конвенция първият знак в searchValue може да бъде , = или цифра (ще го направим така, че ако не е въведен знак за сравнение, по подразбиране ще се проверява обикновено равенство). match е променлива, декларирана във функция (oSettings, aData, iDataIndex)<>.

Филтърът за размер на файл/папка изглежда малко по-сложен. Първо трябва да конвертирате данните в един формат и след това да извършите сравнение. Всички размери се преобразуват в байтове. По подразбиране размерът на отметната стойност (searchValue) се счита за килобайти, но ако има m в края, тогава стойността ще се счита за мегабайти.

Филтрирането е завършено. Остава да направим сортирането. За полетата за преброяване на операционната система също е подходящо стандартното сортиране на dataTables, но за полето за честотна лента нека напишем собствено. Нашият код трябва да бъде включен в:

В документацията се казва, че трябва да се направят три метода: "bandwidth-pre", "bandwidth-asc", "bandwidth-desc". Първият извършва трансформация на данни за сравнение, а вторият и третият връщат резултата от сравняване на две стойности при сортиране във възходящ и низходящ ред.

Резултат.

Направено е сортиране и филтриране за всяка колона в таблицата, предвидени са филтри за условието „по-голямо от“, „по-малко от“, „равно на“, както и възможността за сортиране по няколко колони е получена веднага.

ВТОРИ МАТЕРИАЛ

Нещо не работи с товастатии и в кошчето за състезанието е.

Една от най-често срещаните задачи е представянето на данни в табличен вид с възможност потребителят да сортира, търси, да навигира през страници, да променя броя на записите на една страница. ПриставкатаjQuery DataTables лесно се справя с всички тези задачи. Вярно е, че трябва да се отбележи, че все още не е много подходящ за представяне на големи масиви от данни, но голям брой практически проблеми ще помогнат за решаването. Първо изпробвайте как работи този плъгин и след това ще анализираме неговите характеристики подробно.

Можете да изтеглите примерния изходен код и да възпроизведете този пример на вашия сайт. * – архивът не съдържа js-файлове, те могат да бъдат изтеглени отделно в секциятаИзтегляне.

Ще трябва да включим няколко файла в раздела HEAD на страницата: разбира се, библиотеката jQueryjquery-1.2.6.js и файла на приставкатаjquery.dataTables.js

1	script type="text/javascript" src="js/jquery-1.2.6.js" > скрипт >

2	script type="text/javascript" src="js/jquery.dataTables.js" > скрипт >

За да работи правилно плъгина, когато пишете HTML кода на таблицата, трябва да посочите секциитеthead иtbody. Разделътtfoot не е задължителен. Ето примерен HTML код за таблица:

---