在jquery中向dataTable添加行的函数给出了TypeError

时间:2014-11-25 06:12:21

标签: javascript jquery html

在我的Jquery dataTable中,row.add无法正常工作,并抛出错误,指出add函数未定义。错误消息是:

Uncaught TypeError: Cannot read property 'add' of undefined

jsfiddle link

html

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </tfoot>
    </table>
<button id="addRow">Add new row</button>

的javascript

$(document).ready(function() {

    var counter = 1;
    var prntTable = $('#example').dataTable( {  
       "aoColumns" : [ 
           {"bSearchable" : false}, 
           {"bSearchable" : true}, 
           {"bSearchable" : true}
        ],                                          
        "sPaginationType" : "full_numbers"
    } );

    $('#addRow').on( 'click', function () {
        prntTable.row.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3'
        ] ).draw();

        counter++;
    } ); 

    $('#addRow').click();
} );

3 个答案:

答案 0 :(得分:10)

代替:

var prntTable = $("#example").dataTable();

<强>尝试:

var prntTable = $("#example").DataTable();

看起来旧数据表API dataTable()不支持您调用的函数。将新API与DataTable()一起使用。请阅读此处了解更多信息:Datatable API

答案 1 :(得分:3)

 $('#addRow').on( 'click', function () {
       prntTable.row.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3'
        ] ).draw();

        counter++;
    } ); 

在此代码中,prntTable未定义。将其定义为全局变量或在单击函数中重新定义

添加

var prntTable = $('#example').DataTable();   
单击功能后

Fiddle

答案 2 :(得分:2)

尝试使用它适用于我的fnAddData

table.fnAddData(['1','1','2','3','4']);