Расширение nterms/yii2-listjs-widget представляет собой виджет-обертку для скрипта list.js, который позволяет легко производить сортировку и фильтрацию данных в списках и таблицах на стороне пользователя, без дополнительных запросов к приложению.

Установка

Установка этого расширения ничем не отличается от большинства остальных. Просто выполняем команду:

php composer.phar require --prefer-dist "nterms/yii2-listjs-widget" "dev-master"

или добавляем строку в раздел require файла composer.json:

"nterms/yii2-listjs-widget": "dev-master"

Использование

Для подключения, необходимо «обернуть» данные виджетом:

<?php \nterms\listjs\ListJs::begin([
    'id' => 'days-list',
    'search' => true,
    'sort' => [
        'money' => [
            'label' => Yii::t('app', 'По премии'), // Сортировать по премии
        ],
        'week-day' => [
            'label' => Yii::t('app', 'По дню'), // Сортировать по дню недели
        ],
        'second-name' => [
            'label' => Yii::t('app', 'По фамилии'), // Сортировать по фамилии
        ],
        'sex' => [
            'label' => Yii::t('app', 'По полу'), // Сортировать по полу
        ],
    ],
    'clientOptions' => [
        'valueNames' => [
            'money',
            'week-day',
            'second-name',
            'sex',
        ],
    ],
]); ?>
<table class="table table-striped table-bordered">
    <thead>
        <th>Премия</th>
        <th>День недели</th>
        <th>Фамилия</th>
        <th>Пол</th>
    </thead>
    <tbody class="list">
        <tr>
            <td class="money">16574</td>
            <td class="week-day">Понедельник</td>
            <td class="second-name">Иванов</td>
            <td class="sex">М</td>
        </tr>
        <tr>
            <td class="money">65746</td>
            <td class="week-day">Вторник</td>
            <td class="second-name">Петров</td>
            <td class="sex">М</td>
        </tr>
        <tr>
            <td class="money">4564</td>
            <td class="week-day">Среда</td>
            <td class="second-name">Сидорова</td>
            <td class="sex">Ж</td>
        </tr>
        <tr>
            <td class="money">65482</td>
            <td class="week-day">Четверг</td>
            <td class="second-name">Васильева</td>
            <td class="sex">Ж</td>
        </tr>
        <tr>
            <td class="money">26845</td>
            <td class="week-day">Пятница</td>
            <td class="second-name">Смирнова</td>
            <td class="sex">Ж</td>
        </tr>
        <tr>
            <td class="money">78945</td>
            <td class="week-day">Суббота</td>
            <td class="second-name">Викторов</td>
            <td class="sex">М</td>
        </tr>
        <tr>
            <td class="money">35485</td>
            <td class="week-day">Воскресенье</td>
            <td class="second-name">Седых</td>
            <td class="sex">М</td>
        </tr>
    </tbody>
</table>
<?php \nterms\listjs\ListJs::end(); ?>

Настройки

Виджет настраивается следующими параметрами:

• options — html атрибуты для элемента контейнера;
• search — нужно ли отображать поле поиска;
• searchOptions — html атрибуты (пары ‘имя’ => ‘значение’) для элемента поиска input;
• sort — список пар ‘имя’ => ‘значение’ для отображения кнопок управления сортировкой. ‘Значение’ будет использовано в качестве html атрибута для кнопки. Параметр label будут использован как текст кнопки.

  ...
  'sort' => [
      'name' => [
          'class' => 'sort',
          'label' => Yii::t('app', 'Сортировать по имени'),
      ],
  ],
  ...

• clientOptions — параметры для list.js. Подробнее читайте здесь.
• content — html содержимое, будет вставлено перед таблице или списком. Если виджет используется в режиме захвата содержимого, этот параметр игнорируется;
• view — имя файла представления для рендера содержимого. Если виджет используется в режиме захвата содержимого или параметр content задан строкой, параметр view игнорируется;
• viewParams — параметры для рендера представления. Этот параметр используется только совместно с предыдущим.

Расширение на github.

Пример работы библиотеки list.js без yii 2.0

Код примера:
[html]<style type="text/css">
button.sort,input.search {
margin-bottom:5px;
}
</style>
<div id="premial">
<input class="search" type="text" placeholder="Search" />
<button class="sort" data-sort="money">Сортировать по премии</button>
<button class="sort" data-sort="week-day">Сортировать по дню недели</button>
<button class="sort" data-sort="second-name">Сортировать по фамилии</button>
<button class="sort" data-sort="sex">Сортировать по полу</button>
<table class="table table-striped table-bordered">
<thead>
<th>Премия</th>
<th>День недели</th>
<th>Фамилия</th>
<th>Пол</th>
</thead>
<tbody class="list">
<tr>
<td class="money">16574</td>
<td class="week-day">Понедельник</td>
<td class="second-name">Иванов</td>
<td class="sex">М</td>
</tr>
<tr>
<td class="money">65746</td>
<td class="week-day">Вторник</td>
<td class="second-name">Петров</td>
<td class="sex">М</td>
</tr>
<tr>
<td class="money">4564</td>
<td class="week-day">Среда</td>
<td class="second-name">Сидорова</td>
<td class="sex">Ж</td>
</tr>
<tr>
<td class="money">65482</td>
<td class="week-day">Четверг</td>
<td class="second-name">Васильева</td>
<td class="sex">Ж</td>
</tr>
<tr>
<td class="money">26845</td>
<td class="week-day">Пятница</td>
<td class="second-name">Смирнова</td>
<td class="sex">Ж</td>
</tr>
<tr>
<td class="money">78945</td>
<td class="week-day">Суббота</td>
<td class="second-name">Викторов</td>
<td class="sex">М</td>
</tr>
<tr>
<td class="money">35485</td>
<td class="week-day">Воскресенье</td>
<td class="second-name">Седых</td>
<td class="sex">М</td>
</tr>
</tbody>
</table>
</div>
<script src="http://listjs.com/no-cdn/list.js"></script>
<script>var options = {valueNames: [ ‘money’,’week-day’,’second-name’,’sex’, ]};var premialList = new List(‘premial’, options);</script>[/html]