2013-01-02 21 views
13

Używam Datatables i mam następujący kod do generowania tabeli. Chcę wyświetlić pola wyboru wartości odczytu, zapisu, wykonania i administratora. Jeśli wartość jest równa 1, chcę zaznaczyć pole wyboru. i jeśli 0 pól odznaczono.Jak wyświetlić pola wyboru w jquery.datatables?

JavaScript

<script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       var oTable = $('#example').dataTable({ 
        "sScrollY": "500px",         
        "bPaginate": false, 
        "bProcessing": true, 
        "sAjaxSource": "sources/sample.json" 
       }); 


      }); 
     </script> 

HTML

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
        <thead> 
         <tr> 
          <th width="20%">Browser</th> 
          <th width="25%">Read</th> 
          <th width="25%">Write</th> 
          <th width="15%">Execute</th> 
          <th width="15%">Admin</th> 
         </tr> 
        </thead> 
        <tbody> 

        </tbody> 
        </table> 

JSON

{ "aaData": [ 
    ["Trident","0","0","0","1"], 
    ["Trident","0","1","0","0"], 
    ["Trident","0","0","1","1"], 
    ["Trident","0","0","1","1"], 
    ["Trident","0","0","1","1"], 
    ["Trident","0","0","0","0"], 
    ["Gecko","1","1","1","1"], 
    ["Gecko","0","0","0","1"], 
    ["Other browsers","1","0","0","U"] 
] } 
+0

Wygląda na to, że chcesz dodać wbudowane elementy sterujące do datatable: [datatable inline controls] (http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html) .Oto [related ] (http://stackoverflow.com/questions/3444339/jquery-datatables-plugin-adding-a-checkbox-dynamicznie) – zer0bit

Odpowiedz

22

udało mi się zmusić go do pracy przy użyciu datables mrenderer

$(document).ready(function() { 
    var oTable = $('#example').dataTable({ 
     "aoColumnDefs": [{ 
      "aTargets": [0], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "Gecko") { 
        return '<a href="' + data + '">' + data + ' Download Gecko</a>'; 
       } else { 
        return '<a href="' + data + '">' + data + ' Download</a>'; 
       } 
      } 
     }, { 
      "aTargets": [1], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "1") { 
        return '<input type=\"checkbox\" checked value="' + data + '">'; 
       } else { 
        return '<input type=\"checkbox\" value="' + data + '">'; 
       } 
      } 
     }, { 
      "aTargets": [2], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "1") { 
        return '<input type=\"checkbox\" checked value="' + data + '">'; 
       } else { 
        return '<input type=\"checkbox\" value="' + data + '">'; 
       } 
      } 
     }, { 
      "aTargets": [3], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "1") { 
        return '<input type=\"checkbox\" checked value="' + data + '">'; 
       } else { 
        return '<input type=\"checkbox\" value="' + data + '">'; 
       } 
      } 
     }, { 
      "aTargets": [4], 
      //"mData": "download_link", 
      "mRender": function (data, type, full) { 
       if (data == "1") { 
        return '<input type=\"checkbox\" checked value="' + data + '">'; 
       } else { 
        return '<input type=\"checkbox\" value="' + data + '">'; 
       } 
      } 
     }], 
     "bFilter": false, 
     "sScrollY": "500px", 
     "bPaginate": false, 
     "bProcessing": true, 
     "sAjaxSource": "sources/sample.json" 
    }); 
}); 
+2

Szukałem przykładu, jak wyświetlić pola wyboru z json, dzięki za to rozwiązanie, I Chciałbym wiedzieć, jak utworzyć przycisk zapisu, aby zapisać dane z powrotem do serwera po aktualizacji pól wyboru. Dzięki. –