Bootstrap-table: How to pass parameter to server ?

[hello-code]

Hi ! I have 2 questions,can you help me?

$('#table-javascript').bootstrapTable({
method: 'get',
url: '/Home/GetData',
...

1. How to pass parameter to server ?

public ActionResult GetData(int id)
{
var db=new EntityContext();
var list=db.Department.Where(w => w.PId == id).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}

2 Can method: 'POST' ?

[wenzhixin]

Docs: http://wenzhixin.net.cn/p/bootstrap-table/docs/documentation.html#properties
Examples: http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#pagination-table

Use queryParams and method: 'POST'.

[hello-code]

Thanks for your help !

[wenzhixin]

Try this:

queryParams: function (p) {
    return { id: $('#myid').val() };
}

$('#search').click(function () {
    $('#myTable').bootstrapTable('refresh');
});

By the way, you can use search: true to show the default search input.

[hello-code]

Thanks a lot!
I use ASP.NET MVC,in my controller:
public ActionResult test(int id=0)
{
var db=new EntityContext();
var list=db.Department.Where(w => w.PId == id);
return Json(list, JsonRequestBehavior.AllowGet);
}
you see I return json------> [{"Id":1,"Name":"sthAcm","PId":0}]
BUT the webpage is nothing !

I do not know how to show table in the web...
Thanks for your help !

[wenzhixin]

Are you using the GET method?

[hello-code]

Yes,I use
method: 'get',
But still no grid.

[wenzhixin]

Hi, it looks no problem, so I also not clear why. I think you can use the development model (Chrome browser, F12) and see the network request and response:

And check whether catch some errors on the console tab:

[hello-code]

Thanks!
No error...

[wenzhixin]

Hi @hello-code, and what's your html page?

[hello-code]

cshtml

[ddplay]

When using pagination,client will post data like "limit=10&offset=0&order=asc" to server,how to send additional data to server?

[dunmaksim]

Good question. @wenzhixin, please, add additional info into docs about queryParams table property. Thanks!

[wenzhixin]

I will improve the docs if I have time, any PR is welcome!

[wenzhixin]

Hi @ddplay , you can use queryParams option to send additional data.

[kryptonianson]

I have a similar question and also am using ASP.NET MVC. I have no issues displaying a client side table but I am trying to switch to server side pagination. I can't for the life of me figure out how in the world to get the data posted in queryParams. Can anyone help me out? Thanks!

[ddplay]

About using queryParams,you can do something like this to post data to server,

$('#table').bootstrapTable({
    url: 'data1.php',
    queryParams: function (p) {
        return {
            id: 'aa', 
            limit: p.limit,
            offset: p.offset
        };
    }
});

[kryptonianson]

Thanks @ddplay! You helped me get it working. I think a really nice enhancement would be the ability to pass in custom parameters the same way when doing a table refresh. When I change the url on refresh I would like to be able to also specify other things, for example "id: 'bb'" so my methods could react to the change resulting in more flexibility.

[kryptonianson]

@hello-code if you still need help, please let me know. You are using the same backend as I am and I would be happy to help.

[hello-code]

@kryptonianson
@ddplay
Thanks your help ! It's instructive to your discussion for me.
The whole codes:
Html:

@{
    ViewBag.Title = "test";
}
<h2>test</h2>

PId:<input type="text" id="myid" />
Name:<input type="text" id="name" />
<button id="search">search</button>
<hr />
<table id="myTable" ></table>
@section scripts{
    <link href="~/Content/bootstrap-table.min.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-table.min.js"></script>
    <script>
        $(document).ready(function () {
            var myId = $('#myid').val();
            $("#myTable").bootstrapTable({
                url: '/BasicInfo/GetTableData',
                method: 'get',
                queryParams: function (p) {
                    return {
                        myid: $('#myid').val(),
                        name:$('#name').val()
                    };
                },
                columns: [
                     {
                         field: 'Id',
                         title: 'ID',
                         sortable: true
                     },
                     {
                         field: 'Name',
                         title: 'Item Name',
                         sortable: true
                     },
                      {
                          field: 'PId',
                          title: 'PID',
                      }
                ]
            });
            $('#search').click(function () {
                $("#myTable").bootstrapTable('refresh');
            });
        });
    </script>
}

backend:

``` C#
public ActionResult Test()
{
return View();
}
public ActionResult GetTableData(string name, int myid = 0)
{
var db=new EntityContext();
var list=db.Department
.Where(w => w.PId == myid && w.Name == name);
return Json(list, JsonRequestBehavior.AllowGet);
}

![2014-10-31_114504](https://cloud.githubusercontent.com/assets/7741586/4855984/5b327c2c-60b0-11e4-9484-2dd630dcc354.png)
![2014-10-31_114553](https://cloud.githubusercontent.com/assets/7741586/4855985/5b42ba2e-60b0-11e4-872a-4d687fd1d850.png)

Thanks everyone!This working.But still a question about 
**method:'GET'**
and
**method:'POST'**
method:'GET' can use 

``` javascript
queryParams: function (p) { return ...}

then how about method:'POST' ?

Update:
For a long time test...
Before:

                method: 'post',
                queryParams: function (p) {
                    return {
                        "myid": $('#myid').val(),
                        "name":$('#name').val()
                    };
                }

then result is :
Invalid JSON primitive myid
After googling:

               method: 'post',
                queryParams: function (p) {
                    return JSON.stringify({
                        "myid": $('#myid').val(),
                        "name":$('#name').val()
                    });
                }

JSON.stringify({...})

[{"Id":1,"Name":"Dep-10-1","PId":1}]

Is this a correct way?

[wenzhixin]

Hi @hello-code, you can see this issue: #200.

[hello-code]

Issue:#200
$('#tableLogAcess').bootstrapTable('destroy').bootstrapTable({
url: vars.GetAllItens + '?DtBegin=2014/10/01' + '&DtEnd=2014/10/31' + '&Rows=10',
method: 'post'
});
Is this 'post'?
Sorry,I don't know what is the correct way.Can you speak clearly?

[wenzhixin]

Hi @hello-code, have you solved your problem?
http://issues.wenzhixin.net.cn/bootstrap-table/#issues/152.html

[hello-code]

Issue:#200
$('#tableLogAcess').bootstrapTable('destroy').bootstrapTable({
url: vars.GetAllItens + '?DtBegin=2014/10/01' + '&DtEnd=2014/10/31' + '&Rows=10',
method: 'post'
});
Is this 'post'?

Sorry,I don't know what is the correct way.Can you speak clearly?

Hi @hello-code, have you solved your problem?

http://issues.wenzhixin.net.cn/bootstrap-table/152.html

No.Thanks for you reply!
I'm using jquery-DataTables.

[vuducbinh]

Sorry, you answer wrong member. I don't ask that question.

Thanks.

_Binh Vu - Developer_

Blue_com_
The E-Commerce Experts
_Address_: 7/F Scetpa Building
19A Cong Hoa, Ward 12, Tan Binh District,
Ho Chi Minh City, Vietnam
_Mobile phone_: [phone]
_Web_: www.bluecomgroup.com

On Mon, Jan 5, 2015 at 8:48 PM, hello-code [email protected] wrote:

Issue:#200 https://github.com/wenzhixin/bootstrap-table/issues/200
$('#tableLogAcess').bootstrapTable('destroy').bootstrapTable({
url: vars.GetAllItens + '?DtBegin=2014/10/01' + '&DtEnd=2014/10/31' +
'&Rows=10',
method: 'post'
});
Is this 'post'?
Sorry,I don't know what is the correct way.Can you speak clearly?

Hi @hello-code https://github.com/hello-code, have you solved your
problem?
http://issues.wenzhixin.net.cn/bootstrap-table/152.html

No.Thanks!

—
Reply to this email directly or view it on GitHub
https://github.com/wenzhixin/bootstrap-table/issues/152#issuecomment-68709428
.

[havok2063]

In this example, the searching in the POST example does not work, compared to the GET version. Tried searching on "test4" in both. GET returns correct test4 search results. POST returns everything (or does not work).

[prakashcse]

how to pass additional parameters to boostrapTable via javascript, i want to pass startdate and enddate.

[wenzhixin]

https://github.com/wenzhixin/bootstrap-table-examples/blob/master/152.html @prakashcse

[jaydeepgiri]

Hello,

I am using your bootstrap table for listing the data of 10 different categories.
when table is first loaded it loads all the 10 category's data at a time.
Now for the filtering purpose i have used a select drop-down above the table which lists all those 10 categories.
When user wants to list the data of any particular category he selects any 1 category from that list, at that time i must display the data related to that category only.

For this i have coded like this:

$('#main_id').on('change',function(){
        var main_id = $('#main_id').val();

//to load the table content according to the category ID
        $('#table-pagination').bootstrapTable('destroy').bootstrapTable({
        search:true,
        pagination:true,
        sidePagination:'server',
        url:'products-pagination.php',
        method:'get',
        queryParams:function(p){
            return { main_cat_id : main_id }
        }
        });
    });

above code fetches the data correctly but the problem is it does not allow searching, Sorting and pagination What would be the issue.

Thank you..

[aiyuchen]

json_decode(file_get_contents('php://input')