How to allow next, previous and first, last button of pager in jqgrid

Question

I want to show 5 pages as "Page 1 of 5" "View 1 - 5 of 25"with next, previous and first, last button enabled.(There are total 25 records in my database)
For example..

And it is showing me like

Page 1 of 1 view 1-5 of 5

I am using Web method which as follows:

` public JQGrid GetDataForGrid(int pageIndex, int pageSize, string sortIndex, string sortDirection, bool _search, string filters) { JQGrid l_oJQGrid = null;

        try
        {
            using (SqlConnection l_oConn = new SqlConnection(WebConfigurationManager.ConnectionStrings[APP_CONNSTR].ConnectionString))
            {
                l_oConn.Open();

                using (SqlDataAdapter l_oDA = new SqlDataAdapter("GetMasterListData", l_oConn))
                {
                    l_oDA.SelectCommand.CommandType = CommandType.StoredProcedure;
                    l_oDA.SelectCommand.Parameters.AddWithValue("@p_intPage", pageIndex);
                    l_oDA.SelectCommand.Parameters.AddWithValue("@p_intRows", pageSize);
                    l_oDA.SelectCommand.Parameters.Add("@p_intTotalRows", SqlDbType.Int);
                    l_oDA.SelectCommand.Parameters["@p_intTotalRows"].Direction = ParameterDirection.Output;

                    using (DataSet l_oDS = new DataSet())
                    {
                        l_oDA.Fill(l_oDS);
                        if (!l_oDS.HasErrors)
                        {
                            using (DataTable l_oDT = l_oDS.Tables[0])
                            {
                                DataRow[] l_oRows = null;
                                int l_iColCount = l_oDT.Columns.Count;
                                int l_iIDColIndex = l_oDT.Columns.IndexOf("Id");

                                if (!string.IsNullOrEmpty(sortIndex))
                                    l_oRows = l_oDT.Select(string.Empty, sortIndex + " " + sortDirection);
                                else
                                    l_oRows = l_oDT.Select();

                                l_oJQGrid = new JQGrid();

                                if (_search && !String.IsNullOrEmpty(filters))
                                {
                                    JavaScriptSerializer serializer = new JavaScriptSerializer();
                                    JQGrid.JQGridSearchFilter searchFilter = serializer.Deserialize<JQGrid.JQGridSearchFilter>(filters);
                                    // use the searchFilter here
                                }

                                foreach (DataRow l_oRow in l_oRows)
                                {
                                    JQGrid.Row l_oJQRow = new JQGrid.Row();
                                    l_oJQRow.id = l_oRow["Id"].ToString();
                                    for (int l_iColCtr = 0; l_iColCtr < l_iColCount; l_iColCtr++)
                                    {
                                        if (l_iColCtr != l_iIDColIndex)
                                            l_oJQRow.cell.Add(l_oRow[l_iColCtr].ToString());
                                    }

                                    l_oJQGrid.rows.Add(l_oJQRow);
                                }

                                int l_iRecCount = Convert.ToInt32(l_oDA.SelectCommand.Parameters["@p_intTotalRows"].Value);

                                l_oJQGrid.page = pageIndex;
                                l_oJQGrid.records = l_iRecCount;
                                l_oJQGrid.total = (l_iRecCount + pageSize - 1) / pageSize;
                            }
                        }
                    }
                }
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }

        return l_oJQGrid;
    }

my jqgrid code is like this

$(document).ready(function () {
var oItemGrid = $("#ItemGrid");

oItemGrid.jqGrid({
    datatype: function (jqGridParams) {
        getData(jqGridParams);
    },
    colNames: ['Type', 'Name', 'Desc'],
    colModel: [
        { name: 'Type', index: 'Type', width: 40 },
        { name: 'Name', index: 'Name', width: 40 },
        { name: 'Desc', index: 'Desc', width: 40 }
    ],
    autowidth: true,
    height: 'auto',
    rowNum: 5,
    rowList: [5, 10, 15, 20, 25],
    viewrecords: true,
    gridview: true,
    autoencode: true,
    ignoreCase: true,
    caption: 'Filter and Search Functionality',
    pager: '#IGPager',
    loadonce: true
}).jqGrid('navGrid', '#IGPager', { edit: true, add: true, del: true}, {}, {}, {}, {}, {});
});`

what i have to do to enable next, previous, first, last button on pager of grid???

Answer 1

I think your jquery code is fine. but the data send sent by your backend script is not paginated and looks like it is selecting all rows in the table.

For example, have a look at jqgrid + codeigniter example .......................... your controller action ........... $limit = 10;

    $search = $this->input->post('_search');
    $nd = $this->input->post('nd');
    $page = $this->input->post('page');
    $limit = $this->input->post('rows');
    $sidx = $this->input->post('sidx');
    $sord = $this->input->post('sord');
    $where = 'where 1 ';

    if($this->acl->uid() != 1)
        $where .= "AND id != 1 ";

    if($search != 'false'){
      $data = json_decode($this->input->post('filters'));
      foreach($data->rules as $rule){
          $where .= "AND ". $rule->field . " like '" . $rule->data. "%' ";
      }
    }

    if(!$sidx) $sidx =1;

    $count = $this->model->count($where); // get the total records

    if( $count > 0 ) { $total_pages = ceil($count/$limit); } else { $total_pages = 0; }

    if ($page > $total_pages) $page = $total_pages; 

    $start = $limit * $page - $limit;


    $users = $this->model->limitUsers($sidx,$sord,$start,$limit,$where);

    $responce->page = $page; 
    $responce->total = $total_pages; 
    $responce->records = $count;
    $i = 0;
    $base = base_url();       
    if($users){
      foreach($users as $row){
        $edit = $base.'user/edit/'.$row['id'];
        $responce->rows[$i]['id']=$row['id']; 
        $role = $this->group->getAttrbute($row['user_group'],'name');
        $status = ($row['status']) ? "Active":"Disabled";
        $responce->rows[$i]['cell'] = array(
                $responce->rows[$i]['id'] = $row['id'],
                $responce->rows[$i]['username'] = $row['username'],
                $responce->rows[$i]['first_name'] = $row['first_name'],
                $responce->rows[$i]['last_name']=$row['last_name'],
                $responce->rows[$i]['email']=$row['email'],
                $responce->rows[$i]['user_group']=$this->grade->getName($row['grade']),
                $responce->rows[$i]['date_created']=$row['date_created'],
                $responce->rows[$i]['password']=$row['password'],
                $responce->rows[$i]['status']=$status,
                $responce->rows[$i]['action'] = '<a title="Edit" class="editthisrecord" href="'.$edit.'">Edit</a> <a title="Delete" class="deletethisrecord" href="#">Delete</a>'
        );
      $i++;
      }
    }
    echo json_encode($responce);

.................. Hope this will help