Rows not click-able after loading from a server-side database

etilley

I used the example for painting the table and it works properly -

function setupData() {
      $(document).ready(function () {  // USUALLY the clicking code should be included in this bracket - and after the $().DataTable function completes, but that doesn't work in this case
          $('#example').DataTable({
              "ajax": {
                  "url": "/indlist", // This is a call to flask for server-side mysql data
                  "dataType": "json",
                  "dataSrc": "",  // This needed to be blank or it didn't work - "blank" tells datatables something about the data source...
                  "contentType":"application/json"
              },
              "columns": [
                  {"data": "id"},
                  {"data": "code"},
                  {"data": "label"},
                  {"data": "desc"},
                  {"data": "score"},
                  {"data": "sheetscore"}
              ]
          });

      });
    }
    $( window ).on( "load", setupData );    //  THIS WORKS FINE

However, the function doesn't permit me to place row-clicking code which is usually part of the "$(document).ready(function () { " code (see my selection code below).

How do I get these two methods to work together?

$('#example tbody').on( 'click', 'tr', function () {
            // this came from https://datatables.net/examples/advanced_init/events_live.html
            var ind_data = table.row( this ).data();
              // alert( 'You clicked on '+ind_data[0]+'\'s row' );

            if ( $(this).hasClass('selected') ) {
              $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
          } );

colin

See my response to your other thread - please don't duplicate questions.

Colin