Cakephp中的jQuery Datatables可点击行

Question

I am using jQuery Datatables in a custom cakePHP script - due to the facts that the information in my tables are quite long I would like to reduce my table a bit by removing the last column (view / edit) and make the entire row clickable.

Here my current code:

    <table class="responsive_table" id="quotes_table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Client</th>
                <th>Project</th>
                <th class="center">Total</th>
                <th class="center">Status</th>
                <th class="center no_sort">View/Edit</th>
            </tr>
        </thead>
        <?php foreach($quotes as $quote) : ?>
            <tr>
                <td><?php echo $quote['Quote']['quote_date']?></td>
                <td ><?php echo $quote['Client']['client_name']?></td>
                <td><?php echo $quote['Quote']['project']?></td>
                <td class="right"><?php echo $currency. number_format($quote['Quote']['quote_total'], 2, '.', ',')?></td>
                <td class="quote_status"><?php echo $quote['Quote']['status']?></td>
                <td class="center small_cell">
                <?php echo $this->Html->link('View/Edit', array('action' => 'view', $quote['Quote']['id'], '?' => array('nocache' => time())), array('class' => 'view')); ?>
                </td>
            </tr>
        <?php endforeach; ?>
    </table>

    <?php echo $this->Html->script('jquery.dataTables');?>
    <script type="text/javascript">
        if ( $('#quotes_table')[0] ) { 
            $('#quotes_table').dataTable( {
            "aaSorting": [[ 0, "desc" ]],
            "sDom": '<"top"f>irt<"bottom"lp><"clear">',
            "oLanguage": {
             "sSearch": "Search (Auto Filter):"},
             "fnDrawCallback": function( oSettings ) { updateClasses(); }
            } 
        ); }
    </script>

Please also note that my edit link contains some sort of array. What is the best way to have this working?

Answer 1

As the cakephp link() method is hard to penetrate, you can leave it in place and process the table rows client-side - hide the "view/edit" cell and trigger its href when its table row is clicked.

First, to make jQuery selection simpler, wrap the table rows in a <tbody>...</tbody> :

</thead>
<tbody>
<?php foreach($quotes as $quote) : ?>
    ...
<?php endforeach; ?>
</tbody>

Then chain some extra jQuery to your existing $('#quotes_table').dataTable({...}) block.

$('#quotes_table').dataTable({
    "aaSorting": [[ 0, "desc" ]],
    "sDom": '<"top"f>irt<"bottom"lp><"clear">',
    "oLanguage": {
        "sSearch": "Search (Auto Filter):"
    },
    "fnDrawCallback": function( oSettings ) { updateClasses(); }
}).find("tbody tr").each(function() {
    var $a = $(this).find("a.view"); //find view/edit anchor 
    $a.closest("td").hide(); //hide view/edit cell
    $(this).on('click', function() { //on clicking the table row, trigger a click on the anchor. 
        $a.trigger('click');
    });
});