datatables添加組合框作爲列

我有一個數據表使用Datatables。我已經創建並填充瞭如下所示的表格。現在我需要實現一個組合框（假設我已得到2010,2011,2012）以允許用戶選擇一年。那麼當用戶點擊放置在表格中的查看或修改鏈接時，所選年份將作爲參數傳遞到另一頁面。datatables添加組合框作爲列

現在我該如何將我的年份列轉換爲組合框？

 rulesTableGlobal = $('#rulesTable').dataTable({ 
      //"bJQueryUI": true, 
      "sPaginationType": "full_numbers", 
      "aoColumns": [ 
       { "sTitle": "Id", "sWidth" : "20px" }, 
       { "sTitle": "Property ID" , "sWidth" : "20px"}, 
       { "sTitle": "Adress" , "sWidth" : "130px"}, 
       { "sTitle": "Suburb" , "sWidth" : "50px"}, 
       { "sTitle": "Bond", "sWidth" : "25px" }, 
       { "sTitle": "Year", "sWidth" : "25px" , "aType": "dom-select"}, 
       { "sTitle": "View or Modify" , "sWidth" : "50px"}] 

     }); 

    function addPropertyToTable(lt_id, lt_uid, address, suburb_name, min_guests, max_guests, 
           bondFee,cleaningFee,bookingServiceFee, weekly_rate,nightly_rate){ 

     var _lt_id = "\'" + lt_id + "\'"; 
     var viewLink = '<A href="#" onclick="forwardDetails('+_lt_id+');">View and Modify</A>';   
     var year= ""; 

     $('#rulesTable').dataTable().fnAddData([ 
           lt_id, lt_uid, address, suburb_name, bondFee,cleaningFee,bookingServiceFee, weekly_rate,nightly_rate, min_guests, max_guests, year, viewLink ]); 


    } 

     }); 

    }

來源

2010-12-23 user403295

這是我用於遇到同樣問題的傢伙的解決方案。創建組合框並添加到第12列..關閉.. Ozlem。

 function init(){ 

      //http://stackoverflow.com/questions/2759837/adding-dropdown-list-to-the-particular-column-using-jquery 

      var ind = 0; 
      var year = 2010; 
      //var options = getYears(year, 3); 
      $.each($('#rulesTable td:nth-child(12)'), function() { 

       //creates a combobox 
       var select = document.createElement('select'); 
       select.setAttribute('class','year'); 
       select.setAttribute('name',ind+''); 
       select.setAttribute('id','comboYear'+ind); 
       select.innerHTML = '<option value=2010>2010</option><option value=2011>2011</option><option value=2012>2012</option>'; 

       /*for (var i= 0 ; i<options.length; i++){ 
        var nextOption = options[i];       
        select.appendChild(nextOption); 
       }*/ 
       $(this).append(select); 
       $('#comboYear'+ind).change(function() { 

        var comboId = $(this).attr('id'); 
        var comboIndex = $(this).attr('name'); 
        var yearSelected = $('#'+comboId+' option:selected').text(); 
        var propertyId = rulesTableGlobal.fnGetData()[comboIndex][0]; 
        //alert(text); 
        upDateRow(propertyId, yearSelected, comboIndex); 

       }); 

       year = year+1; 
       ind++;     

      }); 

     }

來源

2010-12-29 03:52:40 user403295

定義您的組合框在HTML這樣的：

<select id="year"> 
    <option value="2010">2010</option> 
    <option value="2011">2011</option> 
    <option value="2012">2012</option> 
</select>

每當你需要的組合框的實際選擇的值，你可以調用

$("#year").val()

這並不是很好的做法重複jQuery DOM查找，所以你可能想這樣做：

// Define this on document ready 
var selectYear = $("#year"); 

// Use this syntax to get the current value 
selectYear.val()

我無法從你的示例代碼中看到你會使用它的位置（可能在var year = "";的行中，如果更改爲var year = selectYear.val();），但我希望這可以讓你順其自然。如果沒有，請隨時在評論中詢問更多信息。

編輯：根據要求在正常表中顯示年份的示例。

<table> 
    <tr> 
     <td>a cell</td> 
     <td> 
      <select id="year"> 
       <option value="2010">2010</option> 
       <option value="2011">2011</option> 
       <option value="2012">2012</option> 
      </select> 
     </td> 
    </tr> 
</table>

來源

2010-12-23 05:45:24 dyve

雖然，我沒有甚至適當解釋它，你得到了我的意思。我知道如何創建一個html表格並添加任何內容。對於這種情況，在html代碼中，只有一個div +表名。我在加載文件時在JavaScript中創建了所有內容。這是我不擅長的地方。而且，我得到了你所說的，我嘗試過類似的東西。但正如你所看到的，這是一個API表格。所以我不太確定我將如何放置該HTML。我創建了html字符串，但我不知道如何將它嵌入到表列中。你能給我一點更清楚的樣品嗎？謝謝你。 – user403295 2010-12-23 13:19:46

你能給我一個示例代碼來演示如何將年份嵌入普通表中。我的意思是，無論你給我的文章，你可以把它放在JavaScript方面的示例表中，然後我可能會理解:)如果你想看到整個代碼，我只會發布它。再次感謝...問候。 Ozlem。 – user403295 2010-12-23 16:14:24

使用fnRender-

$('#example').dataTable({ 
    aoColumns : [ { 
     fnRender : function(oObj) { 
      return '<select id="year">' + '<option value="2010">2010</option>' + '<option value="2011">2011</option>' + '<option value="2012">2012</option>' + '</select> '; 
     } 
    } ] 
});

來源

2011-12-07 06:46:42 digitebs

datatables添加組合框作爲列

回答

相關問題