jQuery数据表在cakephp的可点击行

jQuery Datatables clickable row in cakephp

本文关键字：数据表 cakephp jQuery 更新时间：2023-09-26

我在自定义cakePHP脚本中使用jQuery数据表-由于我的表中的信息相当长，我想通过删除最后一列(视图/编辑)并使整个行可单击来减少我的表。

下面是我当前的代码:

    <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>

还请注意，我的编辑链接包含某种数组。让它工作的最好方法是什么?

由于cakephp link()方法很难渗透，您可以保留它，并在客户端处理表行—隐藏"view/edit"单元格，并在单击其表行时触发其href。

首先，为了使jQuery选择更简单，用<tbody>...</tbody>:

包装表格行。

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

然后链一些额外的jQuery到你现有的$('#quotes_table').dataTable({...})块。

$('#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');
    });
});