Есть ли плагин jQuery, как DataTables для <ul> ?

Существует ли какой-либо плагин jQuery, который применяет пейджинг, позволяет пользователям выбирать размер страницы и управляет отображением текущей позиции пользователя в результатах (например, «Отображение результатов: 1-5 из 230»)? Я хочу загрузить все элементы списка в «ul». при начальной загрузке страницы и примените послесловие подкачки.

DataTables кажется, делает все это (и больше), но это не работает с 'ul'.

Вот скриншот каркаса для того, что я пытаюсь сделать:

Example Wireframe

Какие-либо предложения?

Ответы на вопрос(2)

который работает с<ul>s.

Поскольку веб-сайт является внутренним, а DataTables настолько надежны, я выбрал DataTables. Страница отображает таблицу с одним столбцом, а стиль настраивается, чтобы скрыть верхний и нижний колонтитулы таблицы. В конце концов, он выглядел точно так же, как и выше. Это просто позор, что разметка должна быть загрязнена уродливым<table> теги.

UL/LIсtable on the fly а затем прикрепитьdataTables(), В этом примере добавляется метод расширения jQuerydataList который преобразует любую цельULs кTABLE (но оставляет существующие таблицы в покое):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/r5xf61zp/5/

$.fn.dataList = function (options) {
    this.each(function () {
        var $table = $(this);
        if ($table.is('ul')) {
            var $ul = $table;
            $table = $ul.wrap('<table><tbody/></table').closest('table');
            $ul.find('li').wrap('<tr><td/></tr>').contents().unwrap();
            $ul.contents().unwrap()
            $table.prepend('<thead><tr><th>Heading</th></tr></thead>');
        }
        $table.dataTable(options);
    });
}

И использовать так же, как.dataTable():

$('.example').dataList({
    "sPaginationType": "full_numbers"
});

The only outstanding issue is what to display for the heading (currently Heading in the example :)

Update - (added heading support)

Просто вернемся к этому и решил, что лучший способ обеспечить заголовок будет черезdata-heading атрибут наUL.

Пример в HTML:

<ul class="example" data-heading="My new heading">

Код:

$.fn.dataList = function (options) {
    this.each(function () {
        var $table = $(this);
        if ($table.is('ul')) {
            var $ul = $table;
            $table = $ul.wrap('<table><tbody/></table').closest('table');
            $ul.find('li').wrap('<tr><td/></tr>').contents().unwrap();
            $ul.contents().unwrap()
            $table.prepend('<thead><tr><th>' + ($ul.data('heading') || '') + '</th></tr></thead>');
        }
        $table.dataTable(options);
    });
}

JSFiddle: http://jsfiddle.net/TrueBlueAussie/r5xf61zp/8/

ВАШ ОТВЕТ НА ВОПРОС