Clever Geek Handbook

How to insert JSON data into DataTable

I am new to Javascript and I am trying to dynamically load Json data into datatable on button click.

My Json data is in below format

     [{"DeviceName": "AND1", "IPAddress": "10.10.12.1221"}, {"DeviceName": "AND2", "IPAddress": "10.10.12.1222"}, {"DeviceName": "AND3", "IPAddress": "10.10.12.1223"}]

Here is my complete HTML code: When I run this code, I get an UncaughtType error in processDeviceDataResults ('#deviceTable'). But I'm pretty sure this is not how you load the data into the datatable.

   

                      
            // Set the hubs URL for the connection
            var url = 'http: // localhost: 8080 / signalr';

            var connection = $ .hubConnection (url);

            // Declare a proxy to reference the hub.
            var hubProxy = connection.createHubProxy ('HubClass');

            hubProxy.on ('DeviceDataResults', processDeviceDataResults);

            connection.start (). done (function () {
                $ ("# GetDeviceData"). Click (function () {
                    hubProxy.invoke ('GetDeviceData');
                });
            });

            function processDeviceDataResults (results) {                 
                $ ('# deviceTable'). dataTable ({
                    "aodata": results
                });
        }
+3


source to share


5 answers


try it

data.json

    {
    "data": [
        {
            "DeviceName": "AND1",
            "IPAddress": "10.10.12.1221"
        },
        {
            "DeviceName": "AND2",
            "IPAddress": "10.10.12.1222"
        },
        {
            "DeviceName": "AND3",
            "IPAddress": "10.10.12.1223"
        }
    ]
}


Js

  $('#deviceTable').dataTable({
      "ajax": "data.json",
      "columns": [
        { "data": "DeviceName" },
        { "data": "IPAddress" }
    ]
  });

example here http://www.wishesafterlive.com/stackoverflow/dataTableJson.php

+1


source


Jifho, Thanks for your answer. I formatted my data with JSON as you said and I get "Uncaught TypeError: Undefined is not a function on line $ ('# deviceTable'). DataTable. I have a table defined in my html corpus like   

       $ (document) .ready (function () {

             var url = 'http: // localhost: 8080 / signalr';

             var connection = $ .hubConnection (url);

             // Declare a proxy to reference the hub.
             var hubProxy = connection.createHubProxy ('HubClass');

             hubProxy.on ('DeviceDataResults', processDeviceDataResults);

             connection.start (). done (function () {
                 $ ("# GetDeviceData"). Click (function () {


                     hubProxy.invoke ('GetDeviceData');
                 });


             });

             function processDeviceDataResults (results) {

                 $ ('# deviceTable'). dataTable ({
                     "ajax": results,
                     "columns": [
                         {"data": "DeviceName"},
                         {"data": "IPAddress"}
                     ]
                 });
             }
         });


my JSON results:

     {"data": [{"DeviceName": "AND1", "IPAddress": "10.10.12.1221"}, {"DeviceName": "AND2", "IPAddress": "10.10.12.1222"}, {"DeviceName" : "AND3", "IPAddress": "10.10.12.1223"}]}
+1


source


marak data is loaded into another file via ajax

ajax.php

  <?php

//in ajax.php get json data
//Here you can create a function that returns the data
$response='
{
    "data": [
        {
            "DeviceName": "AND1",
            "IPAddress": "10.10.12.1221"
        },
        {
            "DeviceName": "AND2",
            "IPAddress": "10.10.12.1222"
        },
        {
            "DeviceName": "AND3",
            "IPAddress": "10.10.12.1223"
        }
    ]
}';

echo $response;
?>

dataTableJson.php

    <!DOCTYPE >
  <html>
  <head>
    <title>Data Table Json</title>

      <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
      <link rel="stylesheet" href="http://cdn.datatables.net/autofill/1.2.1/css/dataTables.autoFill.css" />


      <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
      <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

  <script>

    $(document).ready(function() {

      $('#deviceTable').dataTable({
          "ajax": "ajax.php",
          "columns": [
            { "data": "DeviceName" },
            { "data": "IPAddress" }
        ]
      });
    });
  </script>

</head>
<body>
  <table id="deviceTable" class="hover" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Device</th>
                <th>IP</th>
            </tr>
        </thead> 

        <tfoot>
            <tr>
                <th>Device</th>
                <th>IP</th>
            </tr>
        <tfoot>
    </table>
</body>
</html>
+1


source


Venkata without even waiting for the change you were talking about getting it "Uncaught TypeError: Undefined is not a function in $ ('# deviceTable'). DataTable string

0


source


Yes Venkata they are listed in the Head tags. This is the order they reference

src = "text / javascript" src = "Scripts / jquery-1.6.4.js"

src = "//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"

href = "https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"

href = "https://cdn.datatables.net/autofill/1.2.1/css/dataTables.autoFill.css"

src = "https://code.jquery.com/jquery-1.11.1.js"

src = "Scripts / jquery.signalR-2.1.2.js"

0


source






More articles:


All Articles