Bootstrap-table: passing jSon object data to data-Url attribute using $.ajax

Created on 7 Jul 2014 · 9Comments · Source: wenzhixin/bootstrap-table

I want to pass data to the bootstrap table using jquery, in the example docs it is given as
$('#table').bootstrapTable({
url: 'data.json'
});
,
But I'll call my service and get json object. how can i pass the json Object to the data-Url.

Source

zubair2irfan

All 9 comments

You can checkout the examples: Client Side Pagination Table, Server Side Pagination Table or Via JavaScript.

wenzhixin on 7 Jul 2014

👎1

Or pass the json Object to the data:

$.get('data.json', function(data) {
    $('#table').bootstrapTable({
        data: data
    });
});

wenzhixin on 7 Jul 2014

Thanks Wenzhixin, I Worked on Server Side Pagination Table & Via JavaScript. Is Solved my problem. Thanks a lot :)

zubair2irfan on 8 Jul 2014

You are welcome.

wenzhixin on 8 Jul 2014

I'm trying to achieve this as well but without any luck; No matching records found.

Code:

$('#tablesearchresults_serverside').bootstrapTable({



            url: 'getData.asmx/getCustomers',
            method: 'get',                
            queryParams: function (params) {
                q = {
                    limit: 50, //params.pageSize,
                    offset: 2, //params.offset,
                    search: "'" + params.search + "'",
                    sort: "'" + params.sort + "'",
                    order: "'" + params.order + "'"
                }
                return q;
            },
            cache: false,
            height: 400,
            striped: true,
            pagination: true,
            sidePagination: 'server',
            pageSize: 10,
            pageList: [10, 25, 50, 100, 200],
            search: true,
            showColumns: true,
            showRefresh: true,
            minimumCountColumns: 2,
            clickToSelect: false,
            columns: [
            {
                field: 'Debnr',
                title: 'Debiteur #',
                sortable: true,
                width: 100
            },
            {
                field: 'Naam',
                title: 'Naam',
                sortable: true,
                width: 200
            },
            {
                field: 'Adres',
                title: 'Adres',
                sortable: true
            }
            ]
        });

Chrome shows:
chromef12

What am I missing?

hf1 on 8 Jan 2015

@hf1 ,your response data need to contain two params:

{
    "total": 100,
    "rows": [...]
}

or, you can use the client side:

sidePagination: 'client',
responseHandler: function (res) {
    return res.d;
}

wenzhixin on 17 Jan 2015

Hi,

I searched everywhere but I could not find a solution to my problem. I have a table declared as

<table id="tb-contratos"  class="table"></table>

And I have the following Javascript code to create the table

$(function () {
            $('#tb-contratos').bootstrapTable({
                cache: true,
                striped: false,
                search: false,
                pagination: false,
                sidePagination: 'client',
                showColumns: false,
                showRefresh: false,
                clickToSelect: false,
                columns: [{
                    field: 'Contrato',
                    title: 'Contrato',
                    align: 'center',
                    sortable: false
                }, {
                    field: 'CPF',
                    title: 'CPF',
                    align: 'center',
                    sortable: false

                }, {
                    field: 'Data',
                    title: 'Data',
                    align: 'center',
                    sortable: false
                }, {
                    field: 'Status',
                    title: 'Status',
                    align: 'center'
                }]
            });
        });

I have a button on my page that makes a call to a ASP.NET MVC controller, and after everything is OK I have the Json on my Javascript:

 function Success(data) {
        $('#tb-contratos').bootstrapTable('hideLoading');

        var obj =
   [
        {
            "Contrato": "Contratro1",
            "CPF": "CPF1",
            "Data": "Data1",
            "Status": "Status1"
        },
        {
            "Contrato": "Contratro2",
            "CPF": "CPF1",
            "Data": "Data1",
            "Status": "Status1"
        },
        {
            "Contrato": "Contratro3",
            "CPF": "CPF1",
            "Data": "Data1",
            "Status": "Status1"
        },
        {
            "Contrato": "Contratro4",
            "CPF": "CPF1",
            "Data": "Data1",
            "Status": "Status1"
        }];


        $('#tb-contratos').bootstrapTable({
            data: obj
        });

    }

As you can see, for testing I decided to create a Json obj just to make sure that it was not a problem with the data my controller was sending. I keep receiving "No matching records found".

I also tried calling refresh with data:obj, but that doesn't work.

Thanks