samedi 25 avril 2015

How to get a table class which is being displayed through ajax


I have a main page which has a div with the id of displayTable. In that a table GETs loaded through AJAX from another php page.

The table is laid out like this:

<div class="table-responsive">
      <table class="table table-bordered table table-condensed">
        <thead>
          <tr>
            <td>Name</td>
            <td>Blah Blah</td>
            <td>Blah Blah</td>
            <td>Blah Blah</td>
            <td>Total</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Dilbert</td>
            <td>Rob</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah Blah Blah</td>
          </tr>
        </tbody>
      </table>
    </div>

I am attempting at using this jquery code to make the first tr fixed. So, in the example above, Dilbert and Name would be fixed and the rest is scrollable. However, I cannot seem to get to the table and it doesn't seem to affect it or do anything.

    var $table = $('#displayTable .table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('my-sticky-col');

    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    $fixedColumn.find('tr').each(function (i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
    });


Aucun commentaire:

Enregistrer un commentaire