3

私のdataTableでは、非表示の列に最も近い行のデータの現在のステータスの名前が含まれていますが、入力チェックボックスを押すと、その非表示の列のテキストを次のように変更します:

$("#rBuscarPerfil").on('click','input[type="checkbox"]',function() {
    if($(this).is(':checked')) {
        $(this).closest('tr').find('td:last').html("Activo");
    } else {
        $(this).closest('tr').find('td:last').html("Desactivado");
    }
........
}

上部のボタンを押すと、たとえば次のようになります。

アクティブな dataTable の入力検索では、テキスト "Activo" が配置され、テーブルには、各行の最後の td に "Activo" という単語が含まれている結果のみが表示されます。

非アクティブで、dataTable の入力検索にテキストを配置し、結果のみを表示すると、各行の最後の td に "Desactivado" という単語が含まれます。

問題は次のとおりです。検索は、ページを開くかブラウザを更新したときにのみ機能しますが、各行のチェックボックスをオンまたはオフにすると、最後の TD のテキストが最後の行のテキストに正しく変更されます。しかし、テーブルは現在の状態にあり、その属性を更新していないようで、検索ではそれらの変更による結果が表示されません。

ここに画像の説明を入力

HTML コード表

<table cellspacing="1" id="rBuscarPerfil" class="tableResultsSearch" name="rBuscarPerfil">
<thead>
    <tr>
        <th>NOMBRE</th>
        <th>DESCRIPCIÓN</th>
        <th>ACCIÓN</th>
        <th>STATUS</th>
        <th style="display:none;">STATUS2</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>

テーブルにコンテンツをロードするJS

if(response.success == "success") {
if(area == "perfil") {
    $('#rBuscarPerfil tbody tr').remove();
    $.each(response, function (index,record){
        if(valNumber(index)) {
            var row = $("<tr class='"+record.IdPerfil+"'/>");
            $("<td nombre='"+record.NomPerfil+"'/>").text(record.NomPerfil).appendTo(row);
            $("<td />").text(record.DesPerfil).appendTo(row);
            $("<td />").html("<img src='media/icons/edit_item.png' class='bModifyProfile' cve='"+record.DesPerfil+"' alt='Editar' title='Editar'></img><img src='media/icons/delete_item.png' class='bDeleteProfile' cve='"+record.IdPerfil+"' alt='Eliminar' title='Eliminar'></img>").appendTo(row);

           if (record.EdoPerfil == 1) {
                $("<td />").html("<input type='checkbox' checked/>").appendTo(row);
                row.css("backgroundColor","#b0f2b1");
            } else {
                $("<td />").html("<input type='checkbox' />").appendTo(row);
                row.css("backgroundColor","#ffddec");
            }

            $("<td style='display:none;' />").text(record.nomStatus).appendTo(row);
            row.appendTo("#rBuscarPerfil tbody");
        }
    });
}
}

var oTable = $('#rBuscarPerfil').dataTable({
    "bJQueryUI": true,
    "bRetrieve" : true,
    "bDestroy" : true,
    "aaSorting": [[ 0, "desc" ]],
    "sPaginationType" : "full_numbers"
});

oTable.fnDraw();

私が説明したことを願っています。

4

2 に答える 2

2

Well I had the same problem as you and I fixed it by using the "cell" API object. Basically you have to make the changes with the API.

If you use the "oldschool" DataTable constructor you have to use dataTable().api() , but if you're using the new constructor, it becomes implicitly DataTable() with all the API

// 1. Get the referenced table with its API 
   var tableAPI = $("#rBuscarPerfil").dataTable().api();

// 2. Get the row nodes, because you have to apply the changes to the plugin data
   var nodes    = tableAPI.rows().nodes();

// 3. Let's do the magic!
   $('input[type="checkbox"]', nodes).on('click','input[type="checkbox"]', function () 
   {
     // Let's Store the reference
        var checkBox = this;

     // Could you convert it to a valid DataTable cell, please?
        var cell     = tableAPI.cell( $(checkBox, nodes).closest("tr").find("td:last") );
     // Thanks!

     // Finally change the sweet and tasty data
        cell.data( 
             $(checkBox).is(":checked") ? "Activo" : "Desactivado" 
        ).draw(); // Don't forget to call this beauty
    });

PS. Is my first answer so I hope it helped you.

UPDATED Well I realized about the draw() call at the end -- it refresh the data --, but also draws the data from the begining; so if you are in other page, after you make the change with the checboxes it will return you to the first page in the DataTable.

于 2016-08-14T20:36:50.193 に答える