Reload Ajax request with new parameters

问题:

I obtain table data from database via AJAX request. And I need to change data parameter in AJAX request and refresh the table.

I am refreshing table with command

$('#table1').DataTable().ajax.reload();

I have the following code

$('#table1').DataTable({

    /* SERVER SIDE PROCESSING */
                "serverSide": true,
                "ajax":
                    {
                        "url": "Home/Search",
                        "type": "POST",

                        "data": {
                            'searchType': GetSearchType(),
                            'searchText': GetSearchText()
                            //'searchType': $.mynamespace.searchType
                            //'searchText': $.mynamespace.searchText
                            //'searchType': localStorage.getItem("searchType"),
                            //'searchText': localStorage.getItem("searchText"),
                        }
                    }
            });

But after AJAX reload, original request to the server is sent and new parameter values are ignored. I tried pass the data to the request via function, global variable and browser storage but none of the approach work. On the internet I find solution with

aoData.push() 

function but I don't know how to use it.

My version of jQuery DataTables is 1.10.7.

I also tried destroying and recreating the table with this code:

$('#table1').DataTable({
        "ajax":
            {
                "url": "Home/Search",
                "type": "POST",

                "data": {
                    'searchType': GetSearchType(),
                    'searchText': GetSearchText()
                }
            },
        "destroy" : true
    }).ajax.reload();

but I am getting error message:

DataTables warning: table id=table1 - Ajax error (http://www.datatables.net/manual/tech-notes/7)

The parameters dictionary contains a null entry for parameter 'draw' of non-nullable type 'System.Int32'

回答1:

You can use function as a value for ajax.data option as shown below.

That way your code will be run every time the client makes request to the server and not once as with your initial code.

$('#table1').DataTable({
   "serverSide": true,
   "ajax": {
      "url": "Home/Search",
      "type": "POST",
      "data": function(d){
         d.searchType = GetSearchType();
         d.searchText = GetSearchText();
      }
   }
});

Then use $('#table1').DataTable().ajax.reload() when you need to reload the table or $('#table1').DataTable().ajax.reload(null, false) if you don't want to reset the current page. See ajax.reload() for more information.

回答2:

Okay I found the solution, in the reinitializing of the table, it is needed to specify all settings again otherwise they are taken from default. so the final code is

$('#table1').DataTable({
            "iDisplayStart": 0,
            "iDisplayLength": 50,
            "bPaginate": true,
            "bSort": false,
            "serverSide": true,
             /* and all others settings others than default */
        "ajax":
            {
                "url": "Home/Search",
                "type": "POST",

                "data": {
                    'searchType': GetSearchType(),
                    'searchText': GetSearchText()
                }
            },
        "destroy" : true  /* <---- this setting reinitialize the table */
    }).

but if someone will find better solution, please share it.

回答3:

This is how i accomplish it:

var onSearchClick = function () { search(); };

    var search = function () {


        var startDate =  $('#datetimepicker1').find("input").val();
        var endDate = $('#datetimepicker2').find("input").val();

        $.ajax({
            type: "GET",
            url: "/api/getByDate?startDate=" + startDate + "&endDate="+endDate,
            datatype: "json",
            traditional: true
        })
        .done(function (data) {

          var table = $('#data-table-1').DataTable({
              data: data.data,
              destroy: true,
              "columns": [
             { "data": "id" },
             { "data": "id2" },
             { "data": "id3" }
              ],
              "columnDefs": [
           {
               "targets": [1],
               "visible": false,
               "searchable": false
           },
            {
                "targets": [2],
                "visible": false,
                "searchable": false
            }],
              "sPaginationType": "full_numbers"
          });
      });
    };