Answers

• Rpiechura Posts: 98Questions: 3Answers: 14

  May 2014 edited May 2014

  I didn't encounter this specifically, but I did something similar so I'm hoping it may help you. What I was messing around with is reordering the columns, but always wanting to get the id when I click on the table, my click event is similar to yours except I extracted it into its own function called SelectedRow while passing 'this' in.

  function selectedRow(This) {
      var table = $(This).closest('table').dataTable();
      oTable = table;
  
      if ($(This).hasClass('row_selected')) {
          $(This).removeClass('row_selected');
      }
      else {
          oTable.$('tr.row_selected').removeClass('row_selected');
          $(This).addClass('row_selected');
  
          var data = oTable.fnGetData(This);
          var oSettings = table.fnSettings();
          return getRowID(oSettings, data);
      }
  }
  

  getRowID is another function that I use to actually get the contents of the id field

  function getRowID(oSettings, data) {
      for (var i = 0; i < data.length; i++) {
          var col = oSettings.aoColumns[i].sTitle;
          if (col.toLowerCase().indexOf('id') != -1) {
              return data[i];
          }
      }
  }
  
• Rpiechura Posts: 98Questions: 3Answers: 14

  May 2014

  Sorry for the improper code formatting, I couldn't for the life of me figure out the new system and how to get it to post correctly. I miss the [code] [/code] blocks, they made it very simple.
• allan Posts: 63,381Questions: 1Answers: 10,449 Site admin

  May 2014 Answer ✓

  @Rpiechura - Its markdown, so you can use three ` characters to signal the start and end of a code block.

  @GeoJunkie - The cell().data() method sounds like what you want. Something like table.cell( this, 0 ).data() will give you the data for the cell in column index 0, for row this.

  Allan
• GeoJunkie Posts: 10Questions: 3Answers: 1

  May 2014

  Hmmm...can't get either of those to work. I did try implementing the cell().data() method, but it doesn't seem to work. Here's the code from my system (since I seem to have messed up the sample code above).

                      $(function() {
                          var opportunityTable = $("#dataTable").dataTable({
                              "ajax" : {
                                  "url": "opportunitiesJson.json?json=1",
                                  "dataSrc": ""
                              },
                              "deferRender" : true,
                              "columns":[
                                  { "data":"id" },
                                  { "data":"sponsor" },
                                  { "data":"title" },
                                  { "data":"deadline" }
                              ],
                              "columnDefs": [
                                  { "visible" : false, "targets": [0] }
                              ],
                              "order" : [[ 3, "asc" ]]
                          });
                          
                          $("#dataTable tbody").on('click', 'td', function () {
                              console.log(opportunityTable.cell(this,0).data());
                          });
                      });
  

  My console log shows "Uncaught TypeError: undefined is not a function" at the cell().data() call line when I click the DataTable.
• GeoJunkie Posts: 10Questions: 3Answers: 1

  May 2014

  OK...I figured out that I fell for the old "dataTable" vs "DataTable" mistake. Fixed that but it still doesn't work. When I use table.cell(this).data() as in the example on the documentation, it gives the cell I click on, but when I use table.cell(this,0).data() as given by Allen, it returns "undefined".
• GeoJunkie Posts: 10Questions: 3Answers: 1

  May 2014

  Got it! The click event needs to point to the row. This code worked:

                      $(function() {
                          var opportunityTable = $("#dataTable").DataTable({
                              "ajax" : {
                                  "url": "opportunitiesJson.json?json=1",
                                  "dataSrc": ""
                              },
                              "deferRender" : true,
                              "columns":[
                                  { "data":"id" },
                                  { "data":"sponsor" },
                                  { "data":"title" },
                                  { "data":"deadline" }
                              ],
                              "columnDefs": [
                                  { "visible" : false, "targets": [0] }
                              ],
                              "order" : [[ 3, "asc" ]]
                          });
                          
                          $("#dataTable tbody").on('click', 'tr', function () {
                              console.log(opportunityTable.cell( this, 0 ).data());
                          });
                      });
  

  Thanks!
• allan Posts: 63,381Questions: 1Answers: 10,449 Site admin

  May 2014

  Good to hear that works. You can use the cell as a cell selector as well:

      $("#dataTable tbody").on('click', 'td', function () {
          console.log(opportunityTable.cell(this).data());
      });
  

  See cell-selector.

  Allan
• GeoJunkie Posts: 10Questions: 3Answers: 1

  May 2014

  Yes, but that only returns the cell the user clicked on. To get the hidden 0 column, I had to use the row selector.
• allan Posts: 63,381Questions: 1Answers: 10,449 Site admin

  May 2014

  Duh - sorry. That was fairly daft of me. Not thinking right! :-).

  Allan