POST request with filtered data displayed in datatable - Jquery

Question

POST request with filtered data displayed in datatable - Jquery

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have problems to show the information filtered in a POST and I do not know what the error is, I am following the indications of the official page of Jquery to use the POST but when trying to show the data in the datatable I only see an object : Object, help please.

Thanks !!

<!DOCTYPE html>
  <html>
  <head>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>

    <title>Prueba datatable</title>

    <script>
    $(document).ready(function(){
      var table = $.post( "http://jsonplaceholder.typicode.com/posts",{userId:"3"}, function( data ) {



        table.done(function( data ) {
          alert( "Data Loaded: " + data );
        });
        alert( "success" );
        table.done(function() {
          alert( "second success" );
        })
        table.fail(function() {
          alert( "error" );
        })
        table.always(function() {
          alert( "finished" );
        });


        $('#data-table').DataTable({
         "data" : data,
         columns : [
         {"data" : "userId"},
         {"data" : "id"},
         {"data" : "title"},
         {"data" : "body"}
         ]
       });

      });



    });

    </script>
  </head>
  <body>

   <table id="data-table" class="table table-bordered" width="100%">
    <thead>
      <tr>
        <th>userId</th>
        <th>id</th>
        <th>title</th>
        <th>body</th>
      </tr>
    </thead>


  </table>

  </body>

  </html>

jquery json post datatables

asked by Juan Zamorano 17.09.2018 в 20:34

source

2 answers

Capture SOAP response xml Error jQuery and Ajax, returns [object Object] of a SQL query

score 0 · Answer 1

So I'm trying to show your example Aaron.

 <!DOCTYPE html>
      <html>
      <head>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>

    <title>Stack</title>

        <script>
          $(document).ready(function(){
            initTable();
            setDataTable();
            });

          function initTable(){
                $('#data-table').DataTable({
                   columns : [
                    {"data" : "userId"},
                    {"data" : "id"},
                    {"data" : "title"},
                    {"data" : "body"}
                   ]
              });
              };

             function setDataTable(){
             let table = $.post( "http://jsonplaceholder.typicode.com/posts",{userId:"3"});
              table.done(function( data ) {
             $('#data-table').DataTable().data = data;
                });
                };

      </script>
  </head>
  <body>



    <table id="data-table" class="table table-bordered" width="100%">
        <thead>
          <tr>
          <th>userId</th>
          <th>id</th>
          <th>title</th>
          <th>body</th>
          </tr>
        </thead>


       </table>

      </body>

      </html>

score 0 · Answer 2

The post you are generating is a deferred . You have to adjust your structure. You can assign the configuration only once.

 $(document).ready(function(){
   initTable();
   setDataTable();
});
function initTable(){
    $('#data-table').DataTable({
     columns : [
     {"data" : "userId"},
     {"data" : "id"},
     {"data" : "title"},
     {"data" : "body"}
     ]
   });
  });
}

And when loading your records, do it within the status of the deferred.

function setDataTable(){
    let table = $.post( "http://jsonplaceholder.typicode.com/posts",{userId:"3"});
    table.done(function( data ) {
         AddRows($('#data-table'), data);
    });
}

I will add a couple of functions that I use to fill the tables in datatable. In this way you can work with the data in the table.

function AddRows(tbl, lst) {
    dt = tbl.DataTable();
    dt.clear().draw();
    for (let i in lst)
        if (lst.hasOwnProperty(i))
            AddRow(dt, lst[i]);
}
function AddRow(dt, obj) {
    dt.row.add(obj).draw(false);
}