Ajaxデータを使用したデータ型の応答詳細の表示

Question

Datatableのresponsive details with Bootstrap modalを実装したいが、それは私にとっては役に立たない。最初に気づいたのは、テーブルの最初の列に「プラス記号」が表示されないということです。私はajaxデータを使用していて、この例では表示されない追加のパラメータが必要な場合や、最初の列として自動番号が追加されているため、これが正しいかわかりません。ここで

は、テーブルのHTMLである：ここで

<table id="users" class="table table-striped table-bordered nowrap" data-conf="@Model.ExtraVM.DialogMsg" data-title="@Model.ExtraVM.DialogTitle" data-btnok="@Model.ExtraVM.Button1" data-btncancel="@Model.ExtraVM.Button2"> 
        <thead> 
         <tr> 
          <th>@Model.HeadingVM.Col1</th> 
          <th>@Model.HeadingVM.Col2</th> 
          <th>@Model.HeadingVM.Col3</th> 
          <th>@Model.HeadingVM.Col4</th> 
          <th>@Model.HeadingVM.Col5</th> 
         </tr> 
        </thead> 
        <tbody></tbody> 
       </table> 

はjqueryのコードです：

<script> 
     $(document).ready(function() { 
      var t = $("#users").DataTable({ 
       responsive: { 
        details: { 
         display: $.fn.dataTable.Responsive.display.modal({ 
          header: function (row) { 
           var data = row.data(); 
           return 'Details for ' + data[0] + ' ' + data[1]; 
          } 
         }), 
         renderer: $.fn.dataTable.Responsive.renderer.tableAll({ 
          tableClass: 'table' 
         }) 
        } 
       }, 
       columnDefs: [{ 
        "searchable": false, 
        "orderable": false, 
        "targets": 0 
       }], 
       order: [[1, 'asc']], 
       ajax: { 
        url: "/api/users", 
        dataSrc: "" 
       }, 
       columns: [ 
        { 
         data: "id" 
        }, 
        { 
         data: "firstName" 
        }, 
        { 
         data: "lastName" 
        }, 
        { 
         data: "userName" 
        }, 
        { 
         data: "id", 
         render: function (data) { 
          return "<a href='#'><i class='fa fa-eye' data-id='" + data + "' data-toggle='modal' data-target='#dataPopup'></i></a> | <a href='#'><i class='fa fa-pencil js-edit' data-id='" + data + "'></i></a> | <a href='#'><i class='fa fa-trash js-delete' data-id='" + data + "'></i></a>"; 
         } 
        } 
       ] 
      }); 

      t.on('order.dt search.dt', function() { 
       t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) { 
        cell.innerHTML = i + 1; 
       }); 
      }).draw(); 

      $("#users").on("click", ".js-delete", function() { 
       var btn = $(this); 
       var confirm = btn.parents("table").attr("data-conf"); 
       var dialogTitle = btn.parents("table").attr("data-title"); 
       var btnOK = btn.parents("table").attr("data-btnOk"); 
       var btnCancel = btn.parents("table").attr("data-btnCancel"); 

       bootbox.dialog({ 
        message: confirm, 
        title: dialogTitle, 
        buttons: { 
         main: { 
          label: btnCancel, 
          className: "btn-default", 
          callback: function() { 
           var result = "false"; 
          } 
         }, 
         success: { 
          label: btnOK, 
          className: "btn-primary", 
          callback: function() { 
           $.ajax({ 
            url: "/api/users/" + btn.attr("data-id"), 
            method: "DELETE", 
            success: function() { 
             btn.parents("tr").remove(); 
            } 
           }); 
          } 
         } 
        } 
       }); 
      }); 
     }); 



    </script> 
} 

これは私のテーブルは（プラス記号が欠落している、あなたが見ることができるように）どのように見えるかです：

Answer 1

あなたのコードは大丈夫のようです。プラス記号は、表示領域が十分小さく、列の1つが非表示になった場合にのみ表示されます。

(+)記号を表示するように設定する必要はありませんが、余分な空の列とそれにクラスnoneを使用すると、列を常に非表示にするトリックを使用できます。詳細は、Class logicを参照してください。

コードとデモンストレーションについては、this jsFiddleを参照してください。