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

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 t开发者_开发百科o 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.

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

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

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

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

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.

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

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.

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.