Is there a jQuery plugin like DataTables for a <ul>?

Question

Is there any jQuery plugin that applies paging, allows users to select the page size, and manages displaying user's current position in the results (e.g. 'Showing results: 1-5 of 230')? I want to load all the list items into the 'ul' on initial page load, and apply the paging afterword.

DataTables appears to do all of this (and more), but it doesn't work with a 'ul'.

Here is a wireframe screenshot for what I am trying to accomplish:

Any suggestions?

Answer 1

Another option is to change your UL/LIs to a table on the fly and then attach dataTables(). This example adds a jQuery extension method called dataList that converts any target ULs to a TABLE (but leaves existing tables alone):

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);
    });
}

And use just like .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)

Just revisiting this one and decided the best way to provide a heading would be via a data-heading attribute on the UL.

Example in HTML:

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

Code:

$.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/

Answer 2

After further research I have not found an equivalent to DataTables that works with <ul>s.

Because the website is internal website and DataTables is so robust, I went with DataTables. The page renders a single-column table, and the styling is tweaked to hide the table header and footer. In the end, it looked exactly like the wireframe above. It's just a shame that the markup has to be polluted with the ugly <table> tags.