2016-07-11 27 views
0

我的數據表腳本看起來像這樣如何添加按鈕,在jQuery的數據表

var getsourcinglist = function (url){ 

$('#ajaxLoader').show(); 
      $.ajax({ 
       type : 'GET', 
       url : url, 
       beforeSend : function() { 
        console.log('sending request to fetch'); 
       }, 
       success : function(data) { 
        $('#ajaxLoader').hide(); 
        printTheSourcinglistview(data); 
       }, 
       error: function(data){ 
        $('#ajaxLoader').hide(); 
        console.log(data); 
       } 

      }); 

} 

var printTheSourcinglistview = function(data){ 

    var trHTML = "" ; 

    var table = $('#dataTable1').dataTable({ 
    "bProcessing": true, 
    aaData: data, 
    buttons: [ 
     'copy', 'excel', 'pdf' 
    ], 
    "aoColumns": [ 
      { "mData": "rrno" }, 
      { "mData": "name" }, 
      { "mData": "dob" }, 
      { "mData": "gender" }, 
      { "mData": "job_profile" }, 
      { "mData": "graduation" }, 
      { "mData": "total_exp" }, 
     { "mData": "phone" }, 
     { "mData": "salary_drawn" }, 
     { "mData": "salary_expected" }, 
     { "mData": "email" }, 
     { "mData": "status" }, 
     { "mData": "<button id="x">Click!</button>" }, 
    ], 

}); 

    table.buttons('output:name', '.export').enable(); 
    console.log(table); 
} 

和HTML表格是在這裏

<table id="dataTable1" class="table table-bordered table-striped-col"> 
    <thead> 
    <tr> 
     <th>Sourcing ID</th> 
     <th>Name</th> 
     <th>Dob</th> 
     <th>Gender</th> 
     <th>Job Profile</th> 
     <th>Basic/Graduation</th> 
     <th>Total Exp</th> 
     <th>Contact</th> 
     <th>Salary Drawn</th> 
     <th>Salary Expected</th> 
     <th>Final Status</th> 
     <th>Email</th> 
     <th>Action</th> 
    </tr> 
    </thead> 


</table> 

我得到那個按鈕HTML無法識別的錯誤。

任何幫助

感謝

+0

' 「<按鈕ID =」 X「>點擊!「'語法錯誤 – gcampbell

回答

1

取而代之的是:

{ "mData": "<button id="x">Click!</button>" }, 

{ mDataProp: null, bSortable: false, bSearchable: false, mRender: createBtn }, 

現在添加createBtn功能,如: -

function createBtn(oObj) { 
    return '<button class="x">Click!</button>'; 
} 

,並委派Click事件處理程序,如:

$(document).on('click', '.x', function (e) { 
    alert('Button clicked!'); 
}); 
+0

@palash單詞mDataProp不應該在裏面」「?? – Vikram

+1

如果你在所有地方使用引號,那麼你也可以使用引號來保持一致性。在我的應用程序中,我只是不使用引號引用來保持代碼最小化。它可以很好的工作。 –

+0

@palash最後一個問題假設我有一個名爲'ID'的列來自數據庫,我想在按鈕被點擊時顯示ID,我該怎麼做 – Vikram

相關問題