修改jqgrid源碼

1定容器 大概2225行

if(ts.p.pgbuttons===true) {
                var po=["first"+tp,"prev"+tp, "next"+tp,"last"+tp]; if(dir==="rtl") { po.reverse(); }
                pgl += "<td id=‘"+po[0]+"‘ class=‘ui-pg-button ui-corner-all‘  title=‘首頁‘><span class=‘ui-icon ace-icon fa fa-angle-double-left bigger-140‘
 
></span></td>";
                pgl += "<td id=‘"+po[1]+"‘ class=‘ui-pg-button ui-corner-all‘  title=‘上一頁‘><span class=‘ui-icon ace-icon fa fa-angle-left bigger-140‘></span></td>";
                pgl += "<td><table cellspacing=‘0‘ cellpadding=‘0‘ border=‘0‘ style
 
=‘table-layout:auto;‘ class=‘ui-pg-table custom_pager‘></table></td>";
                pgl += "<td id=‘"+po[2]+"‘ class=‘ui-pg-button ui-corner-all‘ title=‘下一頁‘><span class=‘ui-icon ace-icon fa fa-angle-right bigger-140‘></span></td>";
                pgl += "<td 
 
id=‘"+po[3]+"‘ class=‘ui-pg-button ui-corner-all‘ title=‘末頁‘><span class=‘ui-icon ace-icon fa fa-angle-double-right bigger-140‘></span></td>";
                pgl += ‘<td dir="ltr">跳轉</td>‘;
                pgl += pginp !== "" ?  pginp :"";
                pgl += "<td dir=‘"+dir+"‘>"+$.jgrid.format(ts.p.pgtext || "","","<span id=‘sp_1_"+$.jgrid.jqID(pgid)+"‘></span>")+"</td>";
                pgl += "<td dir=‘"+dir+"‘ style=‘text-align:"+ts.p.recordpos+"‘ class=‘ui-paging-info‘></td>";
            } else if (pginp !== "") { pgl += pginp; }

2.updatepager 大概1941行

//分頁代碼
            
            var total = $(ts).jqGrid(‘getGridParam‘, ‘records‘);  //獲取總條數

             var    rowListNum = $(ts).jqGrid(‘getGridParam‘, ‘rowNum‘); //當前顯示的條數

             var index = $(ts).getGridParam(‘page‘);//當前頁碼
             
             if(total % rowListNum == 0){
                var p_total_page = parseInt(total / rowListNum);
            }else{
                var p_total_page = parseInt(total / rowListNum)+1;
            }
                if (p_total_page > 5 ) {
                    page_icon(1, 5,0);
                    $(ts.p.pager).find("table.custom_pager").find(‘td:first‘).addClass(‘active‘);

                }else{
                    page_icon(1, p_total_page,0);
                }
                if (index != 1 && p_total_page > 5) {
                    pageGroup(index,p_total_page);
                }

            if (p_total_page == 0) {
                $(ts.p.pager).find("table.custom_pager").closest(‘td‘).hide()
            }else{
                $(ts.p.pager).find("table.custom_pager").closest(‘td‘).show()            }
            $(ts.p.pager).find(‘table.custom_pager td.tdpaerborder‘).click( function() {
                var val = $(this).find(‘span‘).text();
                var page = val;//跳轉頁碼數
                    ts.p.page = val;
                    populate();
                    
                    return false;
            });

3.插入新封裝的方法

pageGroup = function(pageNum,pageCount){//點擊跳轉頁面
            switch(pageNum){
                case 1:
                    page_icon(1,5,0);
                break;
                case 2:
                    page_icon(1,5,1);
                break;
                case pageCount-1:
                    page_icon(parseInt(pageCount)-4,parseInt(pageCount),3);
                break;
                case pageCount:
                    page_icon(parseInt(pageCount)-4,parseInt(pageCount),4);
                break;
                default:
                    page_icon(parseInt(pageNum)-2,parseInt(pageNum)+2,2);
                break;
            }
        },
        page_icon = function(page, count,eq) {//根據當前選中頁生成頁面點擊按鈕
            var tbpager = $(ts).getGridParam(‘page‘);
           var str=‘‘;
           str += ‘<tr>‘;
            for (var i = page; i <= count; i++) {

                str += "<td class=‘tdpaerborder ";
                if ((i) == tbpager) {
                    str +=‘active‘;
                }
                str += "‘><span>"+i+"</span></td>";
            }
            str += ‘</tr>‘;
            $(ts.p.pager).find("table.custom_pager").html(str);
        },

效果圖

jjqGrid表格插件自定義頁碼