locked
About bootstrap table's pagination with jquery and json RRS feed

  • Question

  • User1867032655 posted

    Hi:

    dear all, I recently try to learn bootstrap and hope to use bootstrap table 

    to build my asp pages. The bootstrap table websites is as following:

    http://bootstrap-table.wenzhixin.net.cn/getting-started/

    my problem is I hope to get pagination like asp's mechanism of ObjectDataSource and gridview ,

    get one page data each time, not whole data.

    and the following code snippet is an idea to add bootstrap table into

    the ajax codes, as below:

    function GetDataAndShowInBoostrapTable() {
    		$("#btnChecking").click(function () {
    			$.ajax({
    
    				type: 'POST',
    				dataType: "json", //for post method
    				url: './../JSON_TESTING/jQuery_Json_Table.aspx/GetEmployee',
    				contentType: 'application/json; charset=utf-8',
    				data: JSON.stringify({ empId: 1 }),
    
    				success: function (response) {
    					var arr = JSON.parse(response.d);
    					$('#lblData').text(arr.EmpAge);
    				},
    				error: function (error) {
    					alert(error);
    				}
    			});
    			return false;
    		});
    	}
    


     I hope to pass the page number to the function GetEmployee via ajax and json, and when the data

    back to the page, it can be turned into bootstrap table.

    Is any one know how to do that, thanks a lot. 

    Saturday, May 13, 2017 5:20 AM

All replies

  • User-707554951 posted

    Hi  abramhum,

    gvCustomers” is the id of your bootstrap table.



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="ASPSnippets_Pager.min.js" type="text/javascript"></script> <script type="text/javascript">     $(function () {         GetCustomers(1);     });     $(".Pager .page").live("click", function () {         GetCustomers(parseInt($(this).attr('page')));     });     function GetCustomers(pageIndex) {         $.ajax({             type: "POST",             url: "Default.aspx/GetCustomers",             data: '{pageIndex: ' + pageIndex + '}',             contentType: "application/json; charset=utf-8",             dataType: "json",             success: OnSuccess,             failure: function (response) {                 alert(response.d);             },             error: function (response) {                 alert(response.d);             }         });     }       function OnSuccess(response) {         var xmlDoc = $.parseXML(response.d);         var xml = $(xmlDoc);         var customers = xml.find("Customers");         var row = $("[id*=gvCustomers] tr:last-child").clone(true);         $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();         $.each(customers, function () {             var customer = $(this);             $("td", row).eq(0).html($(this).find("CustomerID").text());             $("td", row).eq(1).html($(this).find("ContactName").text());             $("td", row).eq(2).html($(this).find("City").text());             $("[id*=gvCustomers]").append(row);             row = $("[id*=gvCustomers] tr:last-child").clone(true);         });         var pager = xml.find("Pager");         $(".Pager").ASPSnippets_Pager({             ActiveCssClass: "current",             PagerCssClass: "pager",             PageIndex: parseInt(pager.find("PageIndex").text()),             PageSize: parseInt(pager.find("PageSize").text()),             RecordCount: parseInt(pager.find("RecordCount").text())         });     }; </script>  
    [WebMethod]
    public static string GetCustomers(int pageIndex)
    {
        string query = "[GetCustomers_Pager]";
        SqlCommand cmd = new SqlCommand(query);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
        cmd.Parameters.AddWithValue("@PageSize", PageSize);
        cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
        return GetData(cmd, pageIndex).GetXml();
    }
     
    private static DataSet GetData(SqlCommand cmd, int pageIndex)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds, "Customers");
                    DataTable dt = new DataTable("Pager");
                    dt.Columns.Add("PageIndex");
                    dt.Columns.Add("PageSize");
                    dt.Columns.Add("RecordCount");
                    dt.Rows.Add();
                    dt.Rows[0]["PageIndex"] = pageIndex;
                    dt.Rows[0]["PageSize"] = PageSize;
                    dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                    ds.Tables.Add(dt);
                    return ds;
                }
            }
        }
    }

    related link:

    https://www.aspsnippets.com/Articles/Paging-in-HTML-Table-using-jQuery-AJAX-and-JSON-in-ASPNet.aspx

    Best regards

    Cathy

    Monday, May 15, 2017 9:11 AM
  • User1867032655 posted

    Thanks, but it not exactly what I want. I hope to get the clearly usages of bootstrap-table package,

    and develop the client web side based of bootstrap and bootstrap-table.

    but, still thanks for your info, it make the things more clear.

    Tuesday, May 16, 2017 2:39 AM
  • User991499041 posted

    Hi abramhum,

    my problem is I hope to get pagination like asp's mechanism of ObjectDataSource and gridview ,

    get one page data each time, not whole data.

    Based on bootstrap-table documentation, you can set pagination 'true' to show a pagination toolbar.

    $('#tableList').bootstrapTable({
    	url : '...',
    	striped : true,
    	dataType: 'json',
    	pagination : true, //True to show a pagination toolbar on table bottom
    	pageList : [ 3, 5, 20 ],
    	pageSize : 3,
    	pageNumber : 1,
    	queryParamsType: "limit",
    	queryParams : queryParams,
    	sidePagination : 'server',
    	columns : [ {
    		field : '...',
    		title : '...'
    	}, {
    		field : '...',
    		title : '...'
    	} ]
    });
    
    function queryParams(params) {
    	return {
    		pageSize : params.pageSize,
    		page : params.pageNumber
    	};
    }
    

    Regards,

    zxj

    Friday, June 2, 2017 7:31 AM
  • User-2122706230 posted

    Hi zxj,

    I have some problem with the server side pagination and search. please help me out.
    please check this link 

    https://stackoverflow.com/questions/51350056/bootstrap-table-server-side-pagination-and-search-functionality

    Thanks in Advance.

    Sunday, July 22, 2018 4:44 PM
  • User-718533623 posted

    I have the same problem with bootstrap table pagination

    Please help me to rectify this asp.net.

    Thursday, October 8, 2020 1:35 AM