Format an array and pass it to a DataTable using a WebServices

Question

Format an array and pass it to a DataTable using a WebServices

Navigation

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

1

I comment I'm trying to use DataTables making a WebServices to another server, which returns an array in Javascript with the following values :

[
    ["2017-05-25 23:10:00","0","100","17.2"],
    ["2017-05-25 23:20:00","0","100","17.2"],
    ["2017-05-25 23:30:00","0","100","17.2"],
    ["2017-05-25 23:40:00","0","100","17.1"],
    ["2017-05-25 23:50:00","0","100","17.1"],
    ["2017-05-26 00:00:00","0","100","17"]
]

Code:

<script src="js/jquery.js"></script>
<script 
  src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script 
src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script 
src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js">
</script>
<head>
  <title>tablas</title>
<script>

$('#example').DataTable( {
   "processing": true,
   "serverSide": true,
   "ajax": {
       "url": "servidor remoto",
       "type": "POST",

   },

});
</script>
</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>dato1</th>
            <th>dato2</th>
            <th>dato3</th>
            <th>dato4</th>

        </tr>
    </thead>

</table>
</body>

You would need to format those values with jQuery and present them in the table.

javascript jquery datatables

asked by EdgardoAMart 30.05.2017 в 05:10

source

2 answers

0

I recommend that under thead you put the tbody, ejm:

<tbody id="tableBody">
</tbody>

in the success of the ajax

success: function(data){
   for(var i = 0 ; i<data.length;i++){
   $("#tableBody").append("<tr>")  
    for(var j = 0 ; j<4 ;j++)
    {
      $("#tableBody").append("<td>"+data[i][j]+"</td>")
    }
  $("#tableBody").append("</tr>")
  }
 }

answered by 30.05.2017 в 06:02

Click on a span element that is inside an iframe with vba Modify Value Of A Bean And Collect It In Another Different Class

score 0 · Accepted Answer

First of all, you have to define which columns you are receiving from the ajax, this serves to identify how many parameters you expect to be shown in the table.

columns:[
  {data: Dato1},
  {data: Dato2},
  {data: Dato3},
  {data: Dato4},
]

If your json or matrix you receive only contains those 4 data in the order that you expect there is no need to use it in the ajax dataFilter , but if you need to order it is recommended to use it, therefore the initialization of the datatables would be the following way:

$('#example').DataTable( {
   "processing": true,
   "serverSide": true,
   "ajax": {
       "url": "servidor remoto",
       "type": "POST",
       "dataFilter": function(data){
          //primero recomiendo revisar que es lo que hay en data
          //console.log(data)
          var json = jQuery.parseJSON( data );//string --> json
          json.recordsTotal = json.total;//obteniendo el total de registros
          json.recordsFiltered = json.total;//total de registros filtrados
          json.data = json.list;//informacion que va en la tabla

          return JSON.stringify( json ); // return JSON string
       }
   },
   columns:[
     {data: Dato1},
     {data: Dato2},
     {data: Dato3},
     {data: Dato4},
   ]
});

Note: You must take into account that you have to obtain a json as indicated in the documentation link