動態構建jQuery數據表與服務器端數據

基於該參數，我想加載數據庫表數據到CRUD操作jQuery數據表。請建議我如何根據參數構建表頭。動態構建jQuery數據表與服務器端數據

(class name /attributes or table/columns) 
Employee -id,firstname,lastname,email 
Sports - id ,sportname,count 
Tropy - id ,result.

如果用戶從下拉列表中選擇Employee，我將從employee表中提取數據並將其顯示在數據表中。下面

var table = $('#example').DataTable({ 
     "sAjaxSource": "/restservice/employee", 
     "sAjaxDataProp": "", 
     "order": [[ 0, "asc" ]], 
      "aoColumns": [ 
      { "mData": "id"}, 
      { "mData": "firstName"}, 
      { "mData": "lastName"}, 
      { "mData": "email"} 
      ], 
      "paging":false 
     });

下面給出

視圖部分給定爲控制器

@org.springframework.web.bind.annotation.RestController 
public class RestController { 

    @RequestMapping(path="/restservice/employee", method=RequestMethod.GET) 
     public List<Employee> getEmployees() 
     { 

      List<Employee> employeesList = new ArrayList<Employee>(); 
      employeesList.add(new Employee(1,"khaja","sherif","[email protected]")); 
      employeesList.add(new Employee(2,"bharathi","bar","[email protected]")); 
      employeesList.add(new Employee(3,"arun ","arun","[email protected]")); 
      employeesList.add(new Employee(4,"rajesh","bose","[email protected]")); 
      return employeesList; 
     }

Employee表中包含4列，所以我有在數據表中的硬編碼4列。由於體育和獎盃分別包含3列和2列，如何在數據表中構建表頭？

來源

2017-06-03 Vasanth Dha

我使用的版本是1.10+版本。我認爲你們中的一些人有點老。

不知道我完全理解你正在嘗試做什麼，但它聽起來像你基於返回的數據顯示列。試試這個：

<script> 
     $(document).ready(function() { 
      $("#sel").on("change", 
      function() { 
       setupTable($(this).val()); 
      }) 
     }); 
     function setupTable(selVal) { 
      //Employee -id,firstname,lastname,email 
      //Sports - id ,sportname,count 
      //Tropy - id ,result. 
      if ($.fn.DataTable.isDataTable('#example')) { 
       $('#example').DataTable().destroy(); 
      } 
      var cols = [{ 'data': 'id', 'title': 'ID' }]; 
      switch (selVal) { 
       case "Employee": 
        cols.push({ 'data': 'firstname', 'title': 'First Name' }); 
        cols.push({ 'data': 'lastname', 'title': 'Last Name' }); 
        cols.push({ 'data': 'email', 'title': 'Email' }); 
        break; 
       case "Sports": 
        cols.push({ 'data': 'sportname', 'title': 'Sport Name' }); 
        cols.push({ 'data': 'count', 'title': 'Count' }); 
        break; 

       case "Trophy": 
        cols.push({ 'data': 'result', 'title': 'Result' }); 
        break; 
       default: 
        alert("nothing selected"); 
        break; 
      } 
      $("#example").html(""); 
      $("#example").DataTable({ 
       "columns": cols, 
       "ajax": {url: "/restservice/" + selVal, dataSrc:""}, 
       "order": [[ 0, "asc" ]], 
       "paging":false 
      }); 
     } 
    </script> 

    <div> 
     <select id="sel"> 
      <option value="0">Select Layout</option> 
      <option value="Employee">id,firstname,lastname,email</option> 
      <option value="Sports"> id ,sportname,count</option> 
      <option value="Trophy">id ,result</option> 
     </select> 

</div> 
    <div> 
     <table id="example" class="display"> 
      <thead></thead> 
      <tbody></tbody> 
     </table> 
    </div>

來源

2017-06-03 17:27:31 Bindrid

工作正常。不錯。 –

動態構建jQuery數據表與服務器端數據

回答

相關問題