Change Pagination Text

[ntcsonline]

HI,

I have WHMCS templates customized for the most part but I just can't figure out how to change the text on the pagination of any tables. The "before" pic is what shows up by default, the "after" pic is after I change .dataTables_paginate .pagination > li a {font-size: 0;} to 1 in CSS. I would just like to remove the Previous and Next text from the buttons, but I can't find any info anywhere about that.

Edit: I can edit the html in Web Developer tools on FireFox, but I haven't the first clue which file to edit the html in.

Any help is greatly appreciated!

Edited March 21, 2020 by ntcsonline

[brian!]

3 hours ago, ntcsonline said:

I have WHMCS templates customized for the most part but I just can't figure out how to change the text on the pagination of any tables. The "before" pic is what shows up by default, the "after" pic is after I change .dataTables_paginate .pagination > li a {font-size: 0;} to 1 in CSS. I would just like to remove the Previous and Next text from the buttons, but I can't find any info anywhere about that.

the majority of tables in the client area, at least when using Six, use DataTables - that's a jQuery plugin and their documentation can be found here.

i'll tell you how to do what you want with the Six template and then you should be able to tweak it for your template (i'm assuming from those screenshots that it's based on Six)...

in /templates/six/includes/tablelist.tpl, the DataTables table formatting and layout used throughout the client area is defined...

<script type="text/javascript">
var alreadyReady = false; // The ready function is being called twice on page load.
jQuery(document).ready( function () {ldelim}
    var table = jQuery("#table{$tableName}").DataTable({ldelim}
        "dom": '<"listtable"fit>pl',{if isset($noPagination) && $noPagination}
        "paging": false,{/if}{if isset($noInfo) && $noInfo}
        "info": false,{/if}{if isset($noSearch) && $noSearch}
        "filter": false,{/if}{if isset($noOrdering) && $noOrdering}
        "ordering": false,{/if}
        "responsive": true,
		"sPaginationType": "numbers",

that last indented line above (there are more lines after it) is new and i'm using it to define the pagination setting - by default, WHMCS uses "simple_numbers"...

• numbers - Page number buttons only
• simple - 'Previous' and 'Next' buttons only
• simple_numbers - 'Previous' and 'Next' buttons, plus page numbers
• full - 'First', 'Previous', 'Next' and 'Last' buttons
• full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
• first_last_numbers - 'First' and 'Last' buttons, plus page numbers

but by setting the value to just "numbers" (as in the above code), that will remove the previous and next buttons and just show the page numbers..

if you change the value to "full"...

... or "full_numbers"...

4 hours ago, ntcsonline said:

Edit: I can edit the html in Web Developer tools on FireFox, but I haven't the first clue which file to edit the html in.

another way, if you wanted a pure CSS solution, would just be to hide those two buttons...

[class^='paginate_button previous'],
[class^='paginate_button next'] {display:none !important;}

[ntcsonline]

Thanks for your response, but I don't want to get rid of the buttons. I want to keep the buttons but get rid of the text on the previous and next buttons because it overlaps the other buttons. The attached pic is what happens when I change it to full_numbers

[ntcsonline]

Nevermind, I got it. I had to change this in the custom.css file.

.page-links a, .page-links > span, .pagination > li > a, .pagination > li > span {
	width: auto !important;

However, the CSS code to make the font show up doesn't work. It works when I edit in Web Developer, but not when I put this in the custom.css file. This is what I used:

.dataTables_paginate .pagination > li a {
	font-size: 1 !important;
}

 

[brian!]

7 hours ago, ntcsonline said:

Thanks for your response, but I don't want to get rid of the buttons. I want to keep the buttons but get rid of the text on the previous and next buttons because it overlaps the other buttons.

then there are still two main options - personally, I wouldn't use CSS for this though (you'd likely end up having to choose first and last childs etc)...

firstly, you could go back to tablelist.tpl and change...

                "sFirst":    "{$LANG.tablepagesfirst}",
                "sLast":     "{$LANG.tablepageslast}",
                "sNext":     "{$LANG.tablepagesnext}",
                "sPrevious": "{$LANG.tablepagesprevious}"

that tells WHMCS to use language strings for First, Last, Previous & Next so that the text on these buttons are shown in the client's language..

                "sFirst":    "«",
                "sLast":     "»",
                "sNext":     "›",
                "sPrevious": "‹"

... and the other way would be to leave tablelist.tpl alone, but use Language Overrides to redefine those four strings listed in tablelist.tpl

$_LANG['tablepagesfirst'] = "«";
$_LANG['tablepageslast'] = "»";
$_LANG['tablepagesnext'] = "›";
$_LANG['tablepagesprevious'] = "‹";

if you use the language override solution, then you'll have to make overrides for all of the languages your site uses; if you use the tablelist solution, you will only have to edit the one file.

[ntcsonline]

After looking at your responses, I managed to figure out the issue. Turns out the WHMCS Bridge addon I have in WordPress added a bunch of stuff into my custom.css file, one of which was the .dataTables_paginate .pagination > li a { font-size: 0 !important; }. After changing that value to 1, the text on the buttons showed up. Then I had to edit the :before to :after so the carrot on the next button shows up after the text. The rest of the styling was accomplished with this code in css:

/* Prevents button overlap */
.page-links a, .page-links > span, .pagination > li > a, .pagination > li > span {
	width: auto !important;
/* adds spacing between buttons and between last button and table edge */
	margin-right: 4px !important;
}

.pagination > .active > a {
	background-color: #666 !important;
}

/* Makes background taller so buttons fit correctly */
.dataTables_wrapper .dataTables_length {
	height: 46px !important;
}

The final result is attached. Thanks for all your help!

Edited March 25, 2020 by ntcsonline