need to pass datatable params to controller in another ajax function

srinidhi189

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

srinidhi189

var dynamicTable;
function generateGrid(gridId, url, columnConfig, columns, columnDefs) {
  //Generate Headers
  generateGridHeaders(gridId, columnConfig);

  dynamicTable = $("#" + gridId).DataTable({
    processing: true,
    serverSide: true,
    filter: true,
    fixedHeader: true,
    scrollX: true,
    scrollY: 800,
    scroller: {
      rowHeight: 800,
    },
    scrollCollapse: true,
    orderCellsTop: true,
    initComplete: function () {
      var i = 0;
      var api = this.api();
      // For each column
      api
        .columns()
        .eq(0)
        .each(function (colIdx) {
          // Set the header cell to contain the input element
          var cell = $(".filters th").eq(
            $(api.column(colIdx).header()).index()
          );

          if (columnConfig[i].filterRequired) {
            var title = $(cell).text();
            $(cell).removeClass("text-white");
            $(cell).html(
              '<input type="text" style="width:100%;text-dark" class="form-control" placeholder="' +
                title +
                '" />'
            );
          } else {
            cell.html("");
          }
          i++;

          // On every keypress in this input
          $(
            "input",
            $(".filters th").eq($(api.column(colIdx).header()).index())
          )
            .off("keyup change")
            .on("keyup change", function (e) {
              e.stopPropagation();
              // Get the search value
              $(this).attr("title", $(this).val());
              var regexr = "({search})"; //$(this).parents('th').find('select').val();
              var cursorPosition = this.selectionStart;
              // Search the column for that value
              api
                .column(colIdx)
                .search(
                  this.value != ""
                    ? regexr.replace("{search}", "" + this.value + "")
                    : "",
                  this.value != "",
                  this.value == ""
                )
                .draw();
              $(this)
                .focus()[0]
                .setSelectionRange(cursorPosition, cursorPosition);
            });
        });
    },

    ajax: {
      url: url,
      type: "POST",
      dataSrc: function (json) {
        if (json.data == null) {
          return [];
        }

        for (var i = 0; i < json.data.length; i++) {
          var d = json.data[i].createdOn;
          var date = new Date(d).toLocaleDateString();
          json.data[i].createdOn = "";
          json.data[i].createdOn = date;
        }
        return json.data;
      },
    },

    language: {
      emptyTable: "No data available in table",
      loadingRecords: "Please wait .. ",
      zeroRecords: "No matching records found",
      processing: '<i class="fa fa-spinner fa-spin datatablespinner"></i>',
    },
    columns: columns,
    columnDefs: columnDefs,
  });
  dynamicTable.draw();
}

function generateGridHeaders(gridId, columnConfig) {
  var grid = document.getElementById(gridId);
  var headerRow = document.createElement("tr");

  for (let i = 0; i < columnConfig.length; i++) {
    if (columnConfig[i].isVisible) {
      var th = document.createElement("th");
      th.innerHTML = columnConfig[i].displayName;
      th.classList.add("text-left", "table-color", "text-dark");
    }
    headerRow.appendChild(th);
  }

  var createHead = document.createElement("thead");

  createHead.appendChild(headerRow);

  grid.appendChild(createHead);
  $("#" + gridId + " thead tr")
    .clone(true)
    .addClass("filters")
    .appendTo("#" + gridId + " thead");
}

function ExportTRGrid() {

  // $('#example').dataTable( {
  var table = dynamicTable;
  //var data = table.state();
  $.ajax({
    url: "/changemanagement/ExportTRGrid",
    type: "POST",
    dataType: "json",
    contentType: "application/json;",
    data: JSON.stringify(table),
    success: function () {
      alert("success");
    },
    error: function () {
      alert("failure");
    },
  });


}

need to get the entire datatable request form parameter and send it to c# controller to implement export excel on specific search conditions

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Probably the easiest way to get the search conditions is to use the search() and columns().search() as getters, ie, without parameters. For example:
http://live.datatables.net/xumoyoke/1/edit

You can do the same with order() if that is needed too.

Or you can use the preXhr to store the sent data parameter and a global variable.

Kevin

srinidhi189

but i need not to trigger datatable for getting the excel file is there any methods to send the current datatable parameters in another ajax to controller of another function of generating excel

kthorngren

As far as I know the server side processing parameters sent to the server are not stored anywhere. You will need to use one of the techniques above. In your button click event use the API's I described or use the global variable where you saved the parameters in the preXhr event to send to the controller.

Kevin