jQuery UI pagination button image support gone?

dlwhiteman

We were previously using datatables 1.9 with jQuery UI, and were getting the next and previous buttons displayed as arrow images. In attempting to move to datatables 1.10, I noticed the images are replaced with the text "Next" and "Previous". I would like to continue using the images for next and previous instead of the button text. I looked in the source for datatables, and the code for sPageJUINext, etc. is no longer in there. How can I make datatables 1.10 use the ui-icon-circle-arrow-e, etc. instead of text for the pagination buttons?

allan

jQuery UI is still supported - although it will be removed from the core in 1.11 into a plug-in. There is an example here: http://datatables.net/examples/styling/jqueryUI.html .

To use images with jQuery UI, you would need to use the language options to blank out the names (language.paginate.next etc) and then either use CSS to add the images or a paging plug-in could be written to add the required classes.

The old image option was removed in order to improve accessibility in 1.10.

Allan

dlwhiteman

Thanks, Allan. I had found the language options earlier. Where do I find the classes for the next and previous buttons so I can write the CSS to add the images?

allan

There isn't that option in 1.10. As I say, it would require a pagination plug-in to add those classes directly, or use CSS to add the images using the DataTables classes and assigning the required CSS.

Allan

dlwhiteman

Right, I understood that. The thing I'm not understanding is how to determine what the DataTables classes are. This is what I tried.

In the style section of the page:

.paginate_enabled_previous, .paginate_disabled_previous {
background-image: url(css/jquery-ui/images/ui-icons_205595_256x240.png)
}

In the script section, just after the data table is created:

jQuery('.paginate_enabled_previous, .paginate_disabled_previous').addClass("ui-icon").addClass("ui-icon-volume-on");

Am I going about this the wrong way?

allan

That looks okay in principle. Without being able to see the page, I'm not really able to say why it isn't working.

Allan

dlwhiteman

When you say the jQuery image button support was removed for accessibility, was that due to screen readers not being able to announce the button name due to it being an image? If so, I thought you could support screen readers by using alternate attributes on the button without having to have visible text.

allan

The image was added by CSS, so the screenreader just saw an empty cell. I could have added a suitable ARIA attribute, but I wanted to make the paging control consistent between the non-jQuery UI version and the jQuery UI version - particularly since jQuery UI is going to be removed from the core in 1.11.

This sounds like a good topic for a future blog post - how to create a paging renderer with an icon font (or jQuery UI, etc).

Allan

dlwhiteman

Yes, thanks, I would very much appreciate a blog post on this. For the time being, we are going to need to stay with DataTables 1.9, as we don't have time right now to investigate how to do this.

allan

I'll try to find some time to bash together an example sometime for you, but I'm a little overwhelmed with support requests at the moment, so it might take a little while.

Allan

DMakkuni

Here is a plugin slapped together rather quick but which works with the jQuery UI seek icons (ui-icon-seek-first, ui-icon-seek-prev, ui-icon-seek-next, ui-icon-seek-end). Please note that the jQueryUI option is assumed to be false to go along with what Allan mentioned above where jQuery UI support will be removed in version 1.11. The integration files from here were used instead to integrate with the jQuery UI themes.

By the way, Allan, since this is my first time posting here, I wanted to thank you for all the work done on DataTables. I've been integrating DataTables into web application projects for the last few years and (granted there are some small things like this which need tweaking) it hasn't failed me yet. The new API does make things easier to follow.

$.fn.dataTableExt.oPagination.paging_with_jqui_icons = {
    "fnInit": function (oSettings, nPaging, fnCallbackDraw) {
        var nFirst = document.createElement('span');
        var nPrevious = document.createElement('span');
        var nNext = document.createElement('span');
        var nLast = document.createElement('span');

        nFirst.innerHTML = "";
        nPrevious.innerHTML = "";
        nNext.innerHTML = "";
        nLast.innerHTML = "";

        nFirst.className = "ui-icon ui-icon-seek-first first";
        nFirst.style.display = "inline-block";
        nPrevious.className = "ui-icon ui-icon-seek-prev previous";
        nPrevious.style.display = "inline-block";
        nNext.className = "ui-icon ui-icon-seek-next next";
        nNext.style.display = "inline-block";
        nLast.className = "ui-icon ui-icon-seek-end last";
        nLast.style.display = "inline-block";

        if (oSettings.sTableId !== '') {
            nPaging.setAttribute('id', oSettings.sTableId + '_paginate');
            nFirst.setAttribute('id', oSettings.sTableId + '_first');
            nPrevious.setAttribute('id', oSettings.sTableId + '_previous');
            nNext.setAttribute('id', oSettings.sTableId + '_next');
            nLast.setAttribute('id', oSettings.sTableId + '_last');
        }

        nPaging.appendChild(nFirst);
        nPaging.appendChild(nPrevious);
        nPaging.appendChild(nNext);
        nPaging.appendChild(nLast);

        $(nFirst).click(function () {
            oSettings.oApi._fnPageChange(oSettings, "first");
            fnCallbackDraw(oSettings);
        });

        $(nPrevious).click(function () {
            oSettings.oApi._fnPageChange(oSettings, "previous");
            fnCallbackDraw(oSettings);
        });

        $(nNext).click(function () {
            oSettings.oApi._fnPageChange(oSettings, "next");
            fnCallbackDraw(oSettings);
        });

        $(nLast).click(function () {
            oSettings.oApi._fnPageChange(oSettings, "last");
            fnCallbackDraw(oSettings);
        });
    },

    "fnUpdate": function (oSettings, fnCallbackDraw) {
        if (!oSettings.aanFeatures.p)
            return;

        /* Loop over each instance of the pager. */
        var an = oSettings.aanFeatures.p;

        for (var i = 0, iLen = an.length; i < iLen; i++) {
            var icons = an[i].getElementsByTagName('span');

            if (oSettings._iDisplayStart === 0) {
                icons[0].style.display = "none";
                icons[1].style.display = "none";
            }
            else {
                icons[0].style.display = "inline-block";
                icons[1].style.display = "inline-block";
            }

            if (oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay()) {
                icons[2].style.display = "none";
                icons[3].style.display = "none";
            }
            else {
                icons[2].style.display = "inline-block";
                icons[3].style.display = "inline-block";
            }
        }
    }
};

allan

That's awesome. Thank you for posting this and also for your kind words :-). Delighted to hear that DataTables has been useful!

Regards,
Allan

dlwhiteman

Thanks for the sample plugin! I'll give it a shot when I get a chance!