How to Get Row Index when clicked using Server Side Processing

EnzoCheng

Description of problem: The SSP is working but I have no idea how to get the row data when clicked.

JavaScript:

$(document).ready(function(){

    let table =  $('#membership-profile-table').DataTable({

       "deferRender": true,
       "aLengthMenu": [
        [5, 10, 15, -1],
        [5, 10, 15, "All"]
      ],
        "iDisplayLength": 20,
        "language": {
         search: "Search"
       },
      "processing": true,
      "serverSide": true,
      "ajax": "datatableQuery.php",
      dataFilter:function(inData){
        if(inData){
          alert("got");
        }
        else 
          alert("nothing");

      console.log(inData);
    },
      error:function(err, status){
          console.log(err);
      },

   });

Now I get the first row data by hard-coding:

        var rowData = table.data()[0];

Now I need to know how to get a row's index when that row is clicked.

kthorngren

Start with this example. See if row().index() provides what you are looking for.

Kevin

EnzoCheng

Hi Kevin,

To clarify, when I use

                 table.row(this).index() 

it always return undefined.

Looks like "this" is undefined.

the whole script:

                      $(document).ready(function(){

                        let table =  $('#membership-profile-table').DataTable({
                        //responsive: true,
                       "deferRender": true,
                       "aLengthMenu": [
                       [5, 10, 15, -1],
                       [5, 10, 15, "All"]
                        ],
                     "iDisplayLength": 20,
                       "language": {
                      search: "Search"
                        },
                     "processing": true,
                      "serverSide": true,
                     "ajax": "datatableQuery.php",
                      dataFilter:function(inData){

                      if(inData){
                        alert("got");
                      }

                       else 
                      alert("nothing");

                      console.log(inData);

                      },
                     error:function(err, status){

                      console.log(err);
                    },

                  });


                   $("#membership-profile-table tbody").on("click","tr",(e)=>{

                   let index = table.row(this).index();

                   alert(index); // undefined


                         })

             })

html:

kthorngren

I believe with es6 arrow functions you need to use e.currentTarget instead of this with jQuery events. See this example using both es6 arrow function and regular function:
http://live.datatables.net/secujefu/1/edit

Kevin