开发者

How can I show images for pagination when using the jQuery DataTables plugin?

I'd like to show images instead of the "next" "last" text that is displayed now. I tried to just override the text currently being displayed and it didn't seem to change anything. The "next" "last" text is still displayed, let alone I still have no idea how to change it to images.

$('#myTable').dataTable({
 "aaSorting": [[ 开发者_如何学JAVA1, "asc" ]],
 "sPaginationType": "full_numbers",
    "oPaginate": 
    {
        "sNext": 'n',
        "sLast": 'l',
        "sFirst": 'f',
        "sPrevious": 'p'
    }
});

Anyone know how to do this? I would think it would be on the lines of:

    "oPaginate": 
    {
        "sNext": '<img src="myimage.jpg" />',
...
    }


One year late, but this looks like it's still an unanswered question.

To be able to change the default values of next/last buttons you need to pass the oPaginate object as part of the oLanguage object, like so:

$('#myTable').dataTable({
 "aaSorting": [[ 1, "asc" ]],
 "sPaginationType": "full_numbers",
 "oLanguage": {
    "oPaginate": {
        "sNext": 'n',
        "sLast": 'l',
        "sFirst": 'f',
        "sPrevious": 'p'
     }
  }
});

Source


this was a long time ago, but the answer he provided should work... i have this, and it works:

oTable = $('#example').dataTable( {
        "ordering": false,
        //"sDom":"flrtip"
        "sDom":'r<"contactsTable"t><p>',
        "oLanguage": {
            "oPaginate": {
              "sNext": '<i class="entypo-right-circled" ></i>',
              "sPrevious": '<i class="entypo-left-circled" class="Dia_pagination_ico" ></i>'
            }
          }
    });

the css class puts the image, but im guessing the example given should work


You can change them using CSS..

Take a look at my example:

http://www(@)fisheragservice(@)com/tm/users(@)html

The page contains email addresses and don't want the spam bots to index them, so please replace the (@)'s with .'s

You can view the source to see how it was done.. Hope this helps..

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜