DataTables jquery plugin

by Fernando De Leon

HTML

<script src="https://cdn.datatables.net/u/dt/dt-1.10.12,af-2.1.2,b-1.2.1,b-html5-1.2.1,b-print-1.2.1,r-2.1.0,rr-1.1.2,sc-1.4.2,se-1.2.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/u/dt/dt-1.10.12,af-2.1.2,b-1.2.1,b-html5-1.2.1,b-print-1.2.1,r-2.1.0,rr-1.1.2,sc-1.4.2,se-1.2.0/datatables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>id</th>
            </tr>
        </thead>
       <!-- <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>id</th>
            </tr>
        </tfoot> -->
        <tbody>
            <tr id="1">
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>1</td>
                
            </tr>
            <tr id="2">
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>2</td>
            </tr>
            <tr id="3">
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>3</td>
            </tr>
            <tr id="4">
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
             ...

JavaScript

var table = $("#example").DataTable(
				{
        	select:true,
	       	scroller:true,
          scrollY:300,
          deferRender:true,
          rowReorder:false,
          columnDefs:[
          {"targets":6,
           "visible":false
           }]
         
       });
var $selectedData = $("#selectedData");

table.column(0).data().each(function (val,index) {
  console.log("data index :"+index+" value:"+val);

});

/*$("#example tbody").on("click","tr",function() {
  var val = $(this).toggleClass('selected');
});
*/

table.on("select",function(e,dt,type,index) {
  console.log("the type is:"+type+" and dt is:"+dt+" index is--->"+index);
  table[ type ]( index ).nodes().to$().addClass( 'custom-selected' );
  if(type === "row") {
    var data = table.rows(index).data().pluck(0);
    var position = table.rows(index).data().pluck(1);
    var guid = table.rows(index).data().pluck(6);
    
    console.log("the name is :"+data[0]+" "+position[0]);
    $selectedData.html("<p>"+data[0]+"  "+position[0]+"</p>");
    console.log("the index is:"+index);
    console.log("the guid that we should save is :"+guid[0]);
   
  }
});

$("#button").on("click",function() {
 table.rows().deselect();
 //table.row(':eq(15)').select();
 var guidVal = $("#guidNo").val();
 console.log("lets find the index where the guid is is "+guidVal);
 var index = 0;
 /*
 table.column(6).data().each(function (val,i) {
  console.log("the val is:"+val+" the i is:"+i);
  var _this = this;
  if(val === guidVal) {
    console.log("we found it!"+val+" its index is:"+i);
    index = i;
    var jq = "#"+guidVal;
    console.log("js is:"+jq);
    table.row(jq).select().scrollTo();
  }
});
*/
var jq = "#"+guidVal;
table.row(jq).select().scrollTo();
console.log("we scroll to index:"+index);


 
 
});