Is it possible to connect datatables to Node.js server ?

jemz

Hi, can I ask is it possible to use datables to Node.js server ?

Thank you in advance.

allan

Sure. You can use anything you want as long as it outputs HTML or JSON.

Allan

jemz

Hi @Allan, Thank you for the reply, can I also use this in socket.io ?...I tried searching here but I could not get any examples using socket.io and node.js...I hope you can help me.

Thank you in advance.

allan

If you are using socket.io you would use the API to dynamically add, update and remove rows based on the messages received. Have a look at the API reference.

I don't have a specific example using socket.io - if you are unsure how to use socket.io then I would suggest asking in one of their support channels or StackOverflow. Once you have the JSON data from socket, it is just a case of calling row.add(), row().data() or row().remove().

Allan

jemz

Hi @allan, I tried to do it in socket.io but I am confuse in the configuration and binding the data to the datatable , I also get error Requested unknown parameter 'devid'.

Thank you in advance.

index.html

     setInterval(function(){
                    socket.emit('getupdate');

                },1000);
 
   
   
      $('#example').DataTable({
                    "scrollY": "200px",
                    "scrollCollapse": true,
                    "columns": [
                        {"data": "devid"},
                        {"data": "devname"},
                        {"data": "thetime"}

                    ]
                });
              var table =  $('#example').DataTable();
                socket.on('displayupdate',function(data){
                      table.row.add(data).draw();
                });

  <div class="table-responsive">
    <table class="table table-striped table-bordered table-hover display" id="example"  cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>DEVICE NAME</th>
            <th>ALARM TYPE</th>
            <th>DATE ALARM</th>
        </tr>
        </thead>
    </table>
</div>

allan

Does the data object you are adding to the table have a devid parameter? We'd need more information to be able to offer any help beyond that - what the value of data is for example (you probably need to parse it as JSON).

Allan

jemz

Hi @allan,

Here is the result from my database http://pastie.org/10190050
yes I used also JSON.parse like this

 table.row.add(JSON.parse(data)).draw();

but still having this Requested unknown parameter 'devid' for row 0

Thank you in advance.

jemz

HI @allan ,

I fixed it by using table.rows.add(JSON.parse(data)).draw();

but my browser will crash.after 1 min.

Thank you in advance.

jemz

Hi @allan,

can I ask is there a way to load my request data not to use rows.add ?

table.rows.add(JSON.parse(data)).draw();

because I found out that it will keep adding the row.but the original row is only 50 rows,but using rows.add it will continuously add.

Thank you in advance.

allan

If you want to add a new row then row.add() is the API method to use.

If it is continuously adding new rows incorrectly, then I can only presume that is is being called incorrectly. Perhaps you want to use row().data() to update existing row for rows that already exist.

Allan

jemz

Hi @allan,

I am confuse, how can I update if I have no data yet loaded to to the table.I cannot use row.add because it will continuously added new row. the reason why it added continuously because I have setInterval requesting data to server by 1 sec. without using socket.io I can achieve like this

 $('#example').dataTable( {
        "ajax": "update",
        "scrollY": "200px",
        "scrollCollapse": true,
        "deferRender": true,
        "columns": [
                  {"data": "devid"},
                   {"data": "devname"},
                   {"data": "thetime"}

        ]
    });

then calling ajaxreoload in setInveral for 1 sec.

In socket.io I am confuse because I am calling the row.add() method in order to load the data or rows.add() that I requested to server.

Thank you in advance.

jemz

Hi @allan,

Is it effecient way to do rows.remove then rows.add() ? I cannot use row.data() to update exsisting row.because I don't know how to load the data without using the rows.add(). just like I am using in normal way wtihout using socket.io

     $('#example').dataTable( {
       "ajax": "update",
       "scrollY": "200px",
       "scrollCollapse": true,
       "deferRender": true,
       "columns": [
                 {"data": "devid"},
                  {"data": "devname"},
                  {"data": "thetime"}
 
       ]
   });

allan

Is it effecient way to do rows.remove then rows.add() ?

Not really, but if you can't use row().data() then you have little choice! Unless you have a large table, I doubt you'll notice the hit.

Allan

jemz

HI @allan,

How can I load 50 records in my datable ? if I use rows.add() it continously adding 50 records every time my setInterval execute...you said that I will use row().data,so that it will not continously adding 50 records every time my setInterval will run.how do I implement the row().data ? I am confuse in the example in the documentation.

Thank you in advance.

allan

What you need to do is use row.add() if you are adding a new row. And row().data() if you are updating an existing row. For each row you add / update you will need to check if it exists or not. You could use a selector to do that - for example use the DT_RowId property to have the DataTable set the row id and then use that as a selector. Check if it was found using any(), then use the appropriate method.

Allan

jemz

please delete this

jemz

please delete this

jemz

Hi @allan,

I specify the DT_RowID property in my data object and the return data is now like this

see http://pastie.org/10196001 .

how do I check every row the DT_RowId if it is already exist ?

socket.on('displayupdate',function(data){
                var dataarray = JSON.parse(data);
                dataarray.forEach(function(d){
                    
                    if ( table.row.DT_RowId(d.DT_RowId).any() ) { // TypeError: table.row.DT_RowId is not a function
                        console.log('already exist cannot be added');
                    }else{
                        table.row.add(d).draw();
                    }
 
 
                });
 
                 
            });

Thank you in advance.

jemz

Hi @allan,

I am confuse in using the .any() on how to check my table if there is already existing id in the row?

           socket.on('displayupdate',function(data){
                var dataarray = JSON.parse(data);
                dataarray.forEach(function(d){
                     
                    if ( table.rows('#id').any(d.DT_RowId) ) { // I don't know how to check here
                        console.log('already exist cannot be added');
                    }else{
                        table.row.add(d).draw();
                    }
  
                });

            });

Thank you in advance.

allan

The any() method does not accept any parameters (as noted in the documentation for that method).

If you want to use an ID selector then simply do table.rows('#'+d.DT_RowId).any().

Allan

jemz

Hi @allan,

I almost got the idea but it will only add 1 row this is how I check

    socket.on('displayupdate',function(data){
     var dataarray = JSON.parse(data);
     dataarray.forEach(function(d){
           
      
                    if(table.data(d.DT_RowId).any()){
                        console.log("Found");
                    }else{
                          table.row.add(d).draw();
                    }
 
     });
 
 });

Thank you in advance.

allan

table.data(d.DT_RowId).any()

That isn't what I suggested above :-)

Allan

jemz

HI @allan,

I apologize I have not seen your reply :) ..Thank you so much it works :)

jemz

HI @allan,

I just want to ask something, what if the query result from my database will get 50,000 rows?now in client side I will display this to my datatables by using the working code above.my code will check 50,000 times to see if the id exist in row. and run again the setInterval for every 1 second another 50,000 rows will be checked again.

    dataarray.forEach(function(d){
           
         if ( table.rows('#'+d.DT_RowId).any(d.DT_RowId) ) {
             console.log('already exist cannot be added');
         }else{
             table.row.add(d).draw();
         }
 
     });
 

Is this will not affect performance ?

Thank you in advance.

allan

At 50k rows I would suggest using server-side processing - which is probably a fairly significant change for you if you are using sockets.

and run again the setInterval for every 1 second another 50,000 rows will be checked again.

You are transferring all 50k rows every second?! Wow - that will burn through bandwidth! Can you not just transfer the changes?

Allan

jemz

Hi @allan,

How can I apply server-side processing using socket.io ?. can I use this kind of coding.

   $('#example').DataTable( {
    serverSide: true,
    ajax: {
        url: '/data-source',
        type: 'POST'
    }
} );

or still using the row.add() and row.data(). ?this is where I am stuck.

Thank you in advance.

allan

You would need to use ajax as a function and have it proxy all requests to the socket. It is not something I have any example code that share I'm afraid.

Allan

jemz

HI @allan

what do you mean and have it proxy all requests to the socket ?. I tried to implement like this

  socket.on('getdata',function(data){

       $('#example').DataTable( {
    serverSide: true,
    ajax: {
        data: data,
        
    }
} );

});

but it says cannot reinitialize datatbles

allan

Yes, you want to initialise the table only once. Use ajax as a function (see its documentation for the parameters). That function would then be used to send and receive over the socket.

Allan

jemz

Hi @allan,

How do I initialize the datables only once. the datables is inside in the socket eventListener socket.on('getdata').If I put outside the datables on the eventListener, how do I bind the data that is coming from

socket.on('getdata',function(data){ //how do I bind the data if I put the 
//datatables outside in this scope.

});

//If I initialize here outside on my 'getdata'

 $('#example').DataTable( {
    serverSide: true,
    ajax: {
        data: ,//how to bind the data.
         
    }

Thank you in advance

allan

How do I initialize the datables only once. the datables is inside in the socket eventListener

Move it outside of the listener... :-). Assign the result to a variable and use the API.

Allan