Question

我从昨天开始就试图解决这个问题，我尝试过的任何工作都没有。

我有一个使用DataTables（datatables.net）的表。它需要以编程方式清除所有行，然后根据其他表单字段中的用户输入数据添加新行。该页面使用Ajax获取表的新数据，但数据需要自定义，因此我无法直接使用返回的JSON。

最初，页面加载了<table>

的HTML

<table id="outputtable" class="stripe hover compact order-column">
    <thead>
        <tr>
            <th class="text-center"></th>
            <th class="text-center"></th>
            <th class="text-center"></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

jQuery：

<script type="text/javascript">

    oTable = null;      // Output table

    jQuery(document).ready(function () {

        oTable = $('#outputtable').DataTable({
            dom: "t",
            "scrollY": "250px",
            "scrollX": false,
            "scrollCollapse": true,
            "paging": false
        });
    });

</script>

在页面的其他地方，我有一些有事件连接的按钮。例如：

$('#btnRate').click(function (event) {
    event.preventDefault;

    oTable.fnClearTable();

    oTable.row.add([{
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$3,120"
    }, {
        "name": "Garrett Winters",
        "position": "Director",
        "salary": "$5,300"
    }])
    .draw();

    return false;
})

由于oTable是全局的并且在(document).ready()中初始化，因此它应该在我的jQuery中可用。出于某种原因，我无法删除所有现有行或添加新行。单击#btnRate按钮后会触发click事件，每行代码都会执行，但不会对outputtable进行任何更改，也不会抛出任何错误。

以上数据只是我一直努力工作的一个例子。一旦我得到实例，我将处理实际数据。有谁看到我做错了什么？

Answer 1

1.要一次添加多行，您需要使用rows.add()而不是row.add()

2. fnClearTable不再是数据表的功能。见1.10-convert

3.您的表格未设置为使用对象数据，因此请勿传入对象，传入数组。

oTable.rows.add([
    ["Tiger Nixon", "System Architect", "$3,120"],
    ["Garrett Winters", "Director", "$5,300"],
]).draw();

Answer 2

我不确定初始化是否返回对Datatable的引用。 Datatables Manual

但是为什么不使用选择器来获取对JQuery对象的引用？

参见＆＃34; Accessing the API＆＃34;这里

$( '#outputtable' ).DataTable();

或

$( '#outputtable' ).dataTable().api();

或

new $.fn.dataTable.Api( '#outputtable' );

here是我做过的一个例子。

Answer 3

要删除数据表中的所有现有行，您可以使用

public class ActiononBtn extends AppCompatActivity {

    private TextView textview1;
    private Button circleBtn;




    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_graphics1);

        textview1 = (TextView) findViewById(R.id.textview1);
        circleBtn = (Button) findViewById(R.id.circleBtn);

        // Register on click on button
        circleBtn.setOnClickListener(new ClickMe());

    } // Close onCreate Method


    private class ClickMe implements View.OnClickListener {
        public void onClick(View v) {

        }
    }

}//Close main Activity Class

并添加新行

oTable.clear();

并反映变更用法

oTable.rows.add(['aaa', 'bbb', 'ccc'],
                ['ddd', 'eee', 'fff']
);

手动删除/添加DataTable中的行

3 个答案: