Answers

• rberlin01 Posts: 3Questions: 1Answers: 0

  August 2014

  Are you trying to retrieve information from the table to send to the server side method after initialization?
• jimkiely Posts: 9Questions: 10Answers: 0

  August 2014

  I need to pass information in dropdownlists and all the paging, sorting, info.
  .
• wjhumphreys Posts: 52Questions: 9Answers: 5

  August 2014 edited August 2014 Answer ✓

  There is a way to do this with the normal Ajax call but I came across all sorts of issues I didn't like. Datatables give you the facility to make your own Ajax call which is now how I do It. Note that this method will only pass parameters YOU now specify. In this example I dont pass any of the built in Datatables search etc as I dont use them.

   tableFoo = $("#table-foo").DataTable({
      "serverSide": true,
      "ajax": function (data, callback, settings) {  // Make the Ajax call ourselves
          $.ajax({
            url: "/AjaxHandler/Get",
            type: "POST",
            dataType: "json",
            data: {
              draw: data.draw,   // Needed for paging
              start: data.start,    // Needed for paging
              length: data.length, // Needed for paging
              fooId:  $("#fooId").val(),
              fooWhatever: $("#fooWhatever").val(),
            },
            beforeSend: function (xhrObj) {
              // Whatever
            }
          })
          .done(function (data, textStatus, jqXHR) {
  
              // Callback function that must be executed when the required data 
              // has been obtained. 
              // That data should be passed into the callback as the only parameter.
              callback(data);
          })
          .fail(function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
          })
          .always(function (data, textStatus, jqXHR) {
            // Whatever
          });
        },
  ............................... rest of
  
  

  Also see http://datatables.net/examples/server_side/custom_vars.html
• jimkiely Posts: 9Questions: 10Answers: 0

  August 2014 edited August 2014

  wjhumphreys,
  This worked great expect that the paging is not working correctly. I'm handling the paging on the serverside but paging information below the table is not getting populated correctly.

  "Showing 0 to 0 of 0 entries (filtered from NaN total entries)" and the number of Pages is inaccurate.

  I'm so new to this so. Can I make an ajax call with variables and allow the sorting and paging to be handled clientside? Or should I handle everthing serverside and pass back paging data so that datables knows how to handle it?

  Here's the code:
  var tblSpecification = $('#tblSpecification').DataTable({
  "serverSide": true,
  "ajax": function (data, callback, settings) { // Make the Ajax call ourselves
  $.ajax({
  url: "../../Search/Specification",
  type: "POST",
  dataType: "json",
  data: {
  draw: data.draw, // Needed for paging
  start: data.start, // Needed for paging
  length: data.length, // Needed for paging
  compareType: $('#ddlComparison').val(),
  specData: $('#ddlSpecData').val(),
  specData2: $('#ddlSpecData2').val(),
  specType: $('#ddlSpecType').val(),
  partType: $('#ddlPartType').val(),
  },
  beforeSend: function (xhrObj) {
  // Whatever
  }
  })
  .done(function (data, textStatus, jqXHR) {

              // Callback function that must be executed when the required data
              // has been obtained.
              // That data should be passed into the callback as the only parameter.
              callback(data);
          })
          .fail(function (jqXHR, textStatus, errorThrown) {
              alert(errorThrown);
          })
          .always(function (data, textStatus, jqXHR) {
              // Whatever
          });
      },
      "autoWidth": false,
      "deferRender": true,
      "columns": [
          { "title": "Spec Type", "data": "SpecType" },
          { "title": "Spec Data", "data": "SpecData", "visible": false  },
          { "title": "Spec Data", "data": "SpecDataString" },
          { "title": "Part Type", "data": "PartTypeName" },
          { "title": "Part Number", "data": "PartNumber" },
          { "title": "Note", "data": "Note" },
          {
              "title": "", "searchable": false, "sortable": false, "render": function (data, type, row) {
                  return '<a href=\"#\" class=\"btn btn-info\">Part Details</a>';
              }
          }
      ]
  });
  
• jimkiely Posts: 9Questions: 10Answers: 0

  August 2014

  Nevermind! I removed the serverside and i'm using ajax.reload whenever I need to grab new data.