About bootstrap table's pagination with jquery and json

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. 

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

User-718533623 posted

I have the same problem with bootstrap table pagination

Please help me to rectify this asp.net.