如何在Jquery DataTable

时间:2016-07-11 11:33:34

标签: javascript jquery datatables

我的数据表脚本如下所示

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。

任何帮助

谢谢

1 个答案:

答案 0 :(得分:1)

而不是:

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

DO

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

现在添加createBtn功能,如: -

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

和委托的点击事件处理程序,如:

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