need to pass datatable params to controller in another ajax function

need to pass datatable params to controller in another ajax function

srinidhi189srinidhi189 Posts: 3Questions: 1Answers: 0

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

Answers

  • srinidhi189srinidhi189 Posts: 3Questions: 1Answers: 0
    edited November 2022
    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.

  • kthorngrenkthorngren Posts: 17,724Questions: 25Answers: 4,204

    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

  • srinidhi189srinidhi189 Posts: 3Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 17,724Questions: 25Answers: 4,204

    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

Sign In or Register to comment.