jqGrid - How to remove the page selection on the pager but keep the buttons?

Question

I want to remove the paging buttons on the grid, but I want to keep the add, edit, refresh, etc buttons on the bottom left. I don't want the pager there because I will be displaying all records in this particular grid implementation.

I want to keep what is in GREEN but remove what is in RED:

Currently, my solution is to empty out the center of the grid's navigation

$('#pager_center').empty();

But this means that the pager renders to the page, and then gets emptied, I'm wondering if I can just prevent it from even being rendered in the first place.

Sparry

up-voted for clarity "I want to keep the GREEN and remove the RED" – Dictograph

Answer 1

You can use my following JqGrid option to disable RED zone from JqGrid. It should be the best way to solve this question because you don't need to hack JqGrid rendering via CSS style sheet that be caused of problem if JqGrid change pattern for generating pager or you change pager id.

$('#grid').jqGrid
({
    rowList: [],        // disable page size dropdown
    pgbuttons: false,     // disable page control like next, back button
    pgtext: null,         // disable pager text like 'Page 0 of 10'
    viewrecords: false    // disable current view record text like 'View 1-10 of 100' 
});

Och

Using this I still see the "Page <textbox w. current page> of" No more, no less. Everything else is correctly removed. – Jabe

rowList: false will make the dropdown disappear completely – Mcnulty

rowList is actually supposed to be a list of values in the dropdown. To avoid confusing type coercion, use rowList: [] – Menadione

Answer 2

You could apply a CSS style to hide it...?

#pager1_center {
    visibility: hidden;
}

There are also options like pgbuttons and recordtext that settings in the init might cause that part not to render any HTML.

jQuery("#grid_id").jqGrid({pgbuttons:false, recordtext: ''});

Edme

Answer 3

Using this will remove the paging/view records area with buttons and everything.

jQuery("#WebsitesGrid").jqGrid({          
            ...
            pginput: false,
            pgbuttons: false,
            viewrecords: false,
            ....

Witting

Answer 4

$('#grid').jqGrid({pgbuttons:false, recordtext:'', pgtext:'')}

Medici

Answer 5

Or if you would like to have more space in the footer of your jqGrid, you can simply hide desired part of navigation.

gridComplete: function()
{           
   $( '#' + gridId + 'Pager_center' ).hide();
   $( '#' + gridId + 'Pager_left' ).hide();
},

where gridId is id of your jqGrid.

Scouring

That only works if your pager's ID is your gridId plus "Pager". You should use this instead: $(gridElement.getGridParam('pager') + "_center").hide(); – Menadione

Answer 6

If you're looking for a solution to avoid Pager in jqGrid then just add following code in loadcomplete callback or as a statement after your jqgrid call, with or without @Soul_Master's solution,

$("#divPager").css({ "height": "0px", "border": "0px" });

It worked for me.

Tunicate

Answer 7

even you can set align property of pager details like no of records dropdown, pager text, record text. to acheive this need to change pagerpos and recordpos to right or left or center as we required. Details has to be updated in jquery.jqGrid.min.js or just do search for these keywords in your js files and do the update.

Cylinder