Question

有一个dataTable：

<div id="tabl">
    <table id="table_tabl" class="display striped bordered" data-searching="true">
        <thead>
            <tr>
                <th>Salle</th>
                <th>Table</th>
                <th>R&eacute;serv&eacute;e</th>
                <th>Date d&eacute;but</th>
                <th>Date fin</th>
                <th>Action</th> // containing link-buttons "update","delete","register","unregister"
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

$('#table_tabl').dataTable({
    responsive: true,
    "oLanguage": {
        "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt"
    },
    "processing": true,
    "serverSide": true,
    ajax: "<?php  echo RP_SSP ?>server_processing_reservTables.php",  
    "aoColumnDefs": [{ 
        "aTargets": [5],
        "mData": 5,
        "mRender": function (data, type, full) {
            var table_ = '\''+full [0]+'\'';
            return '<div style="text-align:center;"><a href="Restaurantreservation/modifierReservTable/'+ data +'" title="Update"><i class="icon-pencil"></i></a>' + 
                '<a href="#" id="staticDialog" onclick="afficheDlg('+ data +','+table_+')" style="color: red; font-size: 14px;" title="Delete"><i class="icon-cancel-2"></i></a>' +
                '<a href="Restaurantreservation/affecterReservTable/'+ data +'" title="Register"><i class="icon-locked"></i></a>' +
                '<a href="Restaurantreservation/annulerReservTable/'+ data +'" title="Unregister"><i class="icon-unlocked"></i></a></div>';
            },
        }],
        "aLengthMenu": [
            [10, 25,50,100, -1], 
            [10, 25,50,100, "Tout"]
        ]
    });

正如您所看到的，icon-pencil列中有链接按钮icon-cancel-2，icon-locked，icon-unlocked和Action。如果第三列icon-locked的值等于Réservée，我想停用oui链接按钮。怎么做？

Answer 1

您可以将id属性添加到第三列

<th id="dependency-check">Réservée</th>

您可以编写一个小函数来检查第三列中的值，并禁用icon-locked按钮：

function disableIconLocked() { var value = $('th#dependency-check').text() if(value === 'oui') //select icon-locked button as $('.icon-locked') //write the logic to disable it }

然后，您可以在设置/更改第三列值的任何位置调用此函数，并且需要禁用icon-locked按钮。

Answer 2

我不确定这一点，但您可以尝试以下一次：

$('#table_tabl').dataTable({
    responsive: true,
    "oLanguage": {
        "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt"
    },
    "processing": true,
    "serverSide": true,
    ajax: "<?php  echo RP_SSP ?>server_processing_reservTables.php",  
    "aoColumnDefs": [{ 
        "aTargets": [5],
        "mData": 5,
        "mRender": function (data, type, column) {
            var table_ = '\''+column[0]+'\'';
            if(column[2] == 'oui'){
                return '<div style="text-align:center;"><i class="icon-pencil"></i>' + 
                '<i class="icon-cancel-2"></i>' +
                '<i class="icon-locked"></i>' +
                '<i class="icon-unlocked"></i></div>';

            }else{
                return '<div style="text-align:center;"><a href="Restaurantreservation/modifierReservTable/'+ data +'" title="Update"><i class="icon-pencil"></i></a>' + 
                '<a href="#" id="staticDialog" onclick="afficheDlg('+ data +','+table_+')" style="color: red; font-size: 14px;" title="Delete"><i class="icon-cancel-2"></i></a>' +
                '<a href="Restaurantreservation/affecterReservTable/'+ data +'" title="Register"><i class="icon-locked"></i></a>' +
                '<a href="Restaurantreservation/annulerReservTable/'+ data +'" title="Unregister"><i class="icon-unlocked"></i></a></div>';
            }            

            },
        }],
        "aLengthMenu": [
            [10, 25,50,100, -1], 
            [10, 25,50,100, "Tout"]
        ]
    });

Answer 3

我不确定这一点，但你可以尝试使用$.when和.done一次，如果dataTables返回承诺

$.when(
    $('#table_tabl').dataTable({
        responsive: true,
        "oLanguage": {
        "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt"
        },
        "processing": true,
        "serverSide": true,
        ajax: "<?php  echo RP_SSP ?>server_processing_reservTables.php",  
        "aoColumnDefs": [{ 
            "aTargets": [5],
            "mData": 5,
            "mRender": function (data, type, full) {
                 var table_ = '\''+full [0]+'\'';
                 return '<div style="text-align:center;"><a href="Restaurantreservation/modifierReservTable/'+ data +'" title="Update"><i class="icon-pencil"></i></a>' + 
                '<a href="#" id="staticDialog" onclick="afficheDlg('+ data +','+table_+')" style="color: red; font-size: 14px;" title="Delete"><i class="icon-cancel-2"></i></a>' +
                '<a href="Restaurantreservation/affecterReservTable/'+ data +'" title="Register"><i class="icon-locked"></i></a>' +
                '<a href="Restaurantreservation/annulerReservTable/'+ data +'" title="Unregister"><i class="icon-unlocked"></i></a></div>';
               },
          }],
          "aLengthMenu": [
            [10, 25,50,100, -1], 
            [10, 25,50,100, "Tout"]
          ]
      });
).done(function(){
     $.each($('#table_tabl tbody tr td:nth-child(2)',function(){
          if($(this).text()=='oui')
               $(this).closest('tr').find('a [title="Register"]').css('disabled',true); 
              //find anchor with title=Register and disable the whole anchor
     })     
})

试试让我知道任何问题

如何循环dataTable并禁用其特定行上的链接？

3 个答案: