2016-08-18 66 views
0

我有一個需求,我需要將第一列及其後續行值添加爲Checked或Unchecked複選框。我現在面臨的問題是服務器端的動態數據之一。這裏,列名和行值都來自服務器端。這是代碼。如何獲得Jquery Datatable的第一列爲複選框

$('#SettingsDatatable').dataTable({ 
    "order": [], 
    "dom": "Bfrtip", 
    "buttons": ["copy", "csv", "excel", "pdf", "print"], 
    "columnDefs": [{ 
    "className": "dt-center", "orderable": false, "width": 20 
         }], 
    "columns": dataObject[0].columns, 
    "data": dataObject[0].data 
        }); 

如何添加複選框列以及如何基於從dataObject[0].data值它被選中和未選中?請幫忙。謝謝。

+0

我有類似的種溶液,其中i產生UI,其中行/列是由服務器生成的側。你只需要在那裏實現,所以客戶端將相應地呈現UI對象。 –

+0

@Jits如何做到這一點,數據是從服務器端來的Json格式? – Lara

+0

你有沒有數據來自mysql表? –

回答

2

可以使用columnDefs呈現自定義HTML

var dataObject = [{ 
 
    "columns": [{ 
 
    "title": "Select" 
 
    }, { 
 
    "title": "DbColumn Name" 
 
    }, { 
 
    "title": "UserColumn Name" 
 
    }], 
 
    "data": [ 
 
    ["False", "STARTDATE", ""], 
 
    ["True", "ENDDATE", ""], 
 
    ["False", "CLASS ", ""], 
 
    ["True", "AUDIT_DATE ", ""] 
 
    ] 
 
}]; 
 

 
$('#SettingsDatatable').dataTable({ 
 
    "order": [], 
 
    "dom": "Bfrtip", 
 
    "buttons": ["copy", "csv", "excel", "pdf", "print"], 
 
    "columnDefs": [{ 
 
    "targets": 0, 
 
    "render": function(data, type, full, meta) { 
 
     return '<input type="checkbox" ' + (data == 'True' ? 'checked' : '') + ' />'; 
 
    } 
 
    }, { 
 
    "className": "dt-center", 
 
    "orderable": false, 
 
    "width": 20 
 
    }], 
 
    "columns": dataObject[0].columns, 
 
    "data": dataObject[0].data 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.1/css/jquery.dataTables.css" rel="stylesheet" /> 
 
<table id="SettingsDatatable"></table>

+0

如何根據我的服務器端值檢查未選中,假設我有三列,其值爲'[{「列」:[{「title」:「Select」},{「title」:「DbColumn Name」} ,{「title」:「UserColumn Name」}],「data」:[[「False」,「STARTDATE」,「」],[「True」,「ENDDATE」,「」],[「False」 CLASS「,」「],[」True「,」AUDIT_DATE「,」「]]}]' – Lara

+0

用示例更新了我的回答 – Jag

0

這裏是使用的解決方案PHP,MySQL的& jQuery的。請根據您的需要進行轉換

  1. 將您的數據庫從MySQL更改爲Oracle。
  2. 更改服務器端下拉以使用複選框。
  3. 請給出$ settingsDatatableServer變量(代碼中提到的服務器端文件)的確切路徑。

客戶端側(jQuery的):

settingsDatatable = $("#SettingsDatatable").dataTable({ 
    aLengthMenu: [ [10, 25, 50, 100, "-1"], [10, 25, 50, 100, "All"] ], 
     iDisplayLength: 10, 
     searching: true, 
     "aaSorting": [], 
     "order": [[ 0, "asc" ]], 
     "sPaginationType": "full_numbers", 

     "bProcessing": true, 
     "serverSide": true, 
     "bDestroy": true, 
     "cache": false, 
     "sAjaxSource": "<?php echo $settingsDatatableServer; ?>", 

     "aoColumnDefs": [ 
      { "bSortable": false, "aTargets": [ 1, 2, 3, 4, 5 ] }, 
      { "data": "column1" }, 
      { "data": "column2" }, 
      { "data": "column3" }, 
      { "data": "column4" }, 
      { "data": "column5" }, 
     ], 
    }); 

服務器側(PHP + MySQL的)

<?php 

if($_GET) { 

    $aColumns = array('column1', 'column2', 'column3', 'column4', 'column5'); 

    $sIndexColumn = "column1"; 

    $sTable = $yourtable; 

    $sSql['user'] = DB_USER; 
    $sSql['password'] = DB_PASSWORD; 
    $sSql['db'] = DB_NAME; 
    $sSql['server'] = DB_HOST; 

    function fatal_error ($sErrorMessage = '') 
    { 
     header($_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error'); 
     die($sErrorMessage); 
    } 

    if (! $sSql['link'] = mysqli_connect($sSql['server'], $sSql['user'], $sSql['password'] )) 
    { 
     fatal_error('Could not open connection to server'); 
    } 

    if (! mysqli_select_db($sSql['link'], $sSql['db'])) 
    { 
     fatal_error('Could not select database '); 
    } 


    /* 
    * Paging 
    */ 
    $sLimit = ""; 
    if (isset($_GET['iDisplayStart']) && $_GET['iDisplayLength'] != '-1') 
    { 
     $sLimit = "LIMIT ".intval($_GET['iDisplayStart']).", ". 
      intval($_GET['iDisplayLength']); 
    } 


    /* 
    * Ordering 
    */ 
    $sOrder = ""; 
    if (isset($_GET['iSortCol_0'])) 
    { 
     $sOrder = "ORDER BY "; 
     for ($i=0 ; $i<intval($_GET['iSortingCols']) ; $i++) 
     { 
      if ($_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true") 
      { 
       $sOrder .= "`".$aColumns[ intval($_GET['iSortCol_'.$i]) ]."` ". 
        ($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'asc') .", "; 
      } 
     } 

     $sOrder = substr_replace($sOrder, "", -2); 
     if ($sOrder == "ORDER BY") 
     { 
      $sOrder = ""; 
     } 
    } 


    /* 
    * Filtering 
    */ 
    $sWhere = ""; 
    if (isset($_GET['sSearch']) && $_GET['sSearch'] != "") 
    { 
     $sWhere = "WHERE ("; 
     for ($i=0 ; $i<count($aColumns) ; $i++) 
     { 
      $sWhere .= "`".$aColumns[$i]."` LIKE '%". $_GET['sSearch'] ."%' OR "; 
     } 
     $sWhere = substr_replace($sWhere, "", -3); 
     $sWhere .= ')'; 
    } 

    /* Individual column filtering */ 
    for ($i=0 ; $i<count($aColumns) ; $i++) 
    { 
     if (isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '') 
     { 
      if ($sWhere == "") 
      { 
       $sWhere = "WHERE "; 
      } 
      else 
      { 
       $sWhere .= " AND "; 
      } 
      $sWhere .= "`".$aColumns[$i]."` LIKE '%". $_GET['sSearch_'.$i] ."%' "; 
     } 
    } 


    $sQuery = " 
     SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."` 
     FROM $sTable 
     $sWhere 
     $sOrder 
     $sLimit 
     "; 
    $rResult = mysqli_query($sSql['link'], $sQuery) or fatal_error('MySQL Query Error: ' . mysqli_errno()); 

    $sQuery = " 
     SELECT FOUND_ROWS() 
    "; 
    $rResultFilterTotal = mysqli_query($sSql['link'], $sQuery) or fatal_error('MySQL Filter Error: ' . mysqli_errno()); 
    $aResultFilterTotal = mysqli_fetch_array($rResultFilterTotal); 
    $iFilteredTotal = $aResultFilterTotal[0]; 

    $sQuery = " 
     SELECT COUNT(`".$sIndexColumn."`) 
     FROM $sTable 
    "; 
    $rResultTotal = mysqli_query($sSql['link'], $sQuery) or fatal_error('MySQL Total Error: ' . mysqli_errno()); 
    $aResultTotal = mysqli_fetch_array($rResultTotal); 
    $iTotal = $aResultTotal[0]; 

    $output = array(
     "sEcho" => intval($_GET['sEcho']), 
     "iTotalRecords" => $iTotal, 
     "iTotalDisplayRecords" => $iFilteredTotal, 
     "aaData" => array() 
    ); 

    while ($aRow = mysqli_fetch_array($rResult)) 
    { 
     $row = array(); 
     for ($i=0 ; $i<count($aColumns) ; $i++) { 

      $row[0] = '<select id=' . $aRow['column'] . "-" . $aColumns[$i] . ' class="dropdownselect" style="width:80px; color:red; font-weight:bold; text-align:left; padding-left:3px;"><option selected="selected" value="true">true</option> <option value="false">false</option></select>'; 
      $row[] = $aRow[ $aColumns[$i] ]; 

     } 

     $output['aaData'][] = $row; 
    } 

    echo json_encode($output); 

} 

?> 
相關問題