jQuery DataTable是一個強大的JavaScript插件,用于在HTML表格中添加交互性和特定功能。其最重要的功能之一是能夠方便地更新和添加數據,不需要刷新整個頁面。
要更新數據,需要先定義數據源,然后在表格中搜索和選擇要更新的數據行。在數據源中更新數據后,可以使用DataTable的API更新表格中的數據。
//定義數據源 var data = [ { "name": "John", "age": 24, "city": "New York" }, { "name": "Mary", "age": 31, "city": "Los Angeles" }, { "name": "Peter", "age": 45, "city": "Chicago" } ]; //初始化DataTable var table = $('#example').DataTable({ data: data, columns: [ { data: 'name' }, { data: 'age' }, { data: 'city' } ] }); //搜索并選擇要更新的數據行 var rows = table.rows(function (idx, data, node) { return data.name === 'Mary'; }); //在數據源中更新數據 data[1].age = 32; //使用DataTable的API更新表格中的數據 rows.data(data).draw();
在上面的代碼中,首先定義了一個名為data的數組,作為數據源。然后使用DataTable的API初始化了一個表格,并使用columns選項定義列。
接下來搜索并選擇了名為Mary的數據行。然后,在數據源中更新了名為Mary的age屬性。最后,使用DataTable的API更新表格中的數據,通過將更新后的數據源傳遞給data()方法,并使用draw()方法重繪了表格。
這是一個簡單的例子,展示了如何使用jQuery DataTable更新數據。實際應用中,可能需要使用更復雜的搜索和選擇方法,并且數據源也可能來自于服務器端。盡管如此,DataTable提供了許多API,以便輕松地與其它數據源交互。