如何循环 dataTable 并在其特定行上禁用 link？

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"]
        ]
    });

如您所见，Action 列中有 link 按钮 icon-pencil、icon-cancel-2、icon-locked 和 icon-unlocked . 如果第三列 Réservée 的值等于 oui，我想禁用 icon-locked link 按钮。怎么做？

Answer 1

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

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

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

函数 disableIconLocked() { 变量值 = $('th#dependency-check').text() 如果（值=== 'oui'） //select 图标锁定按钮为 $('.icon-locked') //编写禁用它的逻辑<br> }

然后您可以在第三列的值为 set/changed 的任何地方调用此函数，并且您需要禁用 icon-locked 按钮。

Answer 2

我不确定，但您可以使用 $.when 和 .done 尝试一次，希望 dataTables returns 承诺

$.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
     })     
})

请尝试一下，如有任何问题请告诉我

Answer 3

我不太确定，但您可以按以下方式尝试一次：

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

如何循环 dataTable 并在其特定行上禁用 link？

How to loop a dataTable and disable a link on specific rows of it?

jquery

datatables