Answers

• kthorngren Posts: 21,166Questions: 26Answers: 4,921

  January 2018 Answer ✓

  Do you have serverSide enabled?

  If so your server side code is responsible for performing the search and providing the result.

  Can you post a link to your page for troubleshooting?

  Kevin
• vikastech Posts: 5Questions: 2Answers: 0

  January 2018

  "serverSide": true,
  "stateSave": true,
  "columns": [
  { "data": "Key" },
  { "data": "value" }],

            "ajax": {
  
                type : "POST",
                  url : "data",
                  async:false,
                  success : function(response) {
                      $.each(response.key, function(i, item) {
                          keys.push(item);
                      });
                      $.each(response.value, function(i, item) {
                          values.push(item);
                      });
                  }
            }
          } );
      /* $.ajax({
          type : "GET",
          url : "data",
          async:false,
          success : function(response) {
              $.each(response.key, function(i, item) {
                  keys.push(item);
              });
              $.each(response.value, function(i, item) {
                  values.push(item);
              });
          }
      }); */
      //console.log(keys);
      for ( var key in keys) {
          html = html + '<tr><td>' + keys[key] + '</td><td>' + values[key]
                  + '</td></tr>';
      }
      $("#populate").append(html);
  

  This is my code . I enabled serverSide attr true
• kthorngren Posts: 21,166Questions: 26Answers: 4,921

  January 2018

  It looks like you are populating the table with this code, is that correct?

  for ( var key in keys) {
      html = html + '<tr><td>' + keys[key] + '</td><td>' + values[key]
              + '</td></tr>';
  }
  $("#populate").append(html);
  

  You have this for your ajax config:

        "ajax": {
   
            type : "POST",
              url : "data",
  

  Is "data" a valid URL? or did you change the text to post here?

  What data is being returned from url : "data",?

  If you are populating the table using the for loop above then Datatables does not know about the data in the table which is why things like search is not working. Datatables needs to populate the data.

  Plus you have server side processing enabled so its expected that the server code (the code at url : "data",) will perform the search and provide the appropriate data in the response. Do you really need server side processing?
  https://datatables.net/manual/server-side

  Maybe you want something like this example where Datatables processes the ajax response and populates the table.
  https://datatables.net/examples/ajax/objects.html

  Also you will want to look at this doc to see how the ajax data needs to be returned to Datatables:
  https://datatables.net/manual/data/

  Kevin
• vikastech Posts: 5Questions: 2Answers: 0

  January 2018

  var html = '';
      var keys = new Array();
      var values = new Array();
      $('#tableOf').dataTable({
          "serverSide" : true,
          "stateSave" : true,
          "columns" : [ {
              "data" : "Key"
          }, {
              "data" : "value"
          } ],
          "ajax" : {
              type : "POST",
              url : "data",
              async : false,
              success : function(response) {
                  $.each(response.key, function(i, item) {
                      keys.push(item);
                  });
                  $.each(response.value, function(i, item) {
                      values.push(item);
                  });
              }
          }
      });
  
      for ( var key in keys) {
          html = html + '<tr><td>' + keys[key] + '</td><td>' + values[key]
                  + '</td></tr>';
      }
      $("#populate").append(html);
  

  sorry , I forgot to remove commented code ,
  yes this is the code I am getting the response by ajax call "data" is url of my servlet.

  {value: Array(18), key: Array(18)}

  key:(18) ["1", "2", "3", "4", "5", "6", "7", "8", "9", "11", "21", "31", "41", "51", "61", "71", "81", "91"]

  value:(18) ["Vikas", "Karan", "Anil", "Ajay", "Aakash", "Sanket", "Kamal", "Niket", "Jojo", "Vikas", "Karan", "Anil", "Ajay", "Aakash", "Sanket", "Kamal", "Niket", "Jojo"]

  This response I am getting from server.
• kthorngren Posts: 21,166Questions: 26Answers: 4,921

  January 2018

  Can you return the data in a format supported by Datatables?
  https://datatables.net/manual/data/

  More like this:

  [
      {
          "key":       "1",
          "value":   "Vikas",
      },
      {
          "key":       "2",
          "value":   "Kiran",
      },
  .....
  ]
  

  If you can change the returned structure to something Datatables supports then you can eliminate the Ajax async and success options and remove the need of the for loop. Allowing Datatables to populate the data. But you will need to set ajax.dataSrc to "", for example:

          "ajax" : {
              type : "POST",
              url : "data",
              dataSrc : "",
            }
  

  How many rows of data are you expecting in production?

  Based on what is being returned it doesn't seem like your server code supports server side processing. If the amount of data allows you will be better off having all the data at the client.

  Kevin