Javascript 來源資料
有時您會希望能夠從直接傳遞給 DataTables 的動態資訊建立表格，而不是從文件中讀取。這是透過在初始化物件中使用 data 選項來實現的，傳入要使用的資料陣列（與所有其他 DataTables 處理的資料一樣，這可以是陣列或物件，使用 columns.data 選項）。
頁面上必須有一個可供 DataTables 使用的 table。此範例顯示一個空的 table 元素，該元素使用來自 Javascript 陣列的一組資料初始化為 DataTable。表格中的欄位會根據 columns.title 設定選項動態建立。
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
var dataSet = [ ['Tiger Nixon', '系統架構師', '愛丁堡', '5421', '2011/04/25', '$320,800'], ['Garrett Winters', '會計', '東京', '8422', '2011/07/25', '$170,750'], ['Ashton Cox', '初級技術作家', '舊金山', '1562', '2009/01/12', '$86,000'], ['Cedric Kelly', '資深 Javascript 開發人員', '愛丁堡', '6224', '2012/03/29', '$433,060'], ['Airi Satou', '會計', '東京', '5407', '2008/11/28', '$162,700'], ['Brielle Williamson', '整合專家', '紐約', '4804', '2012/12/02', '$372,000'], ['Herrod Chandler', '銷售助理', '舊金山', '9608', '2012/08/06', '$137,500'], ['Rhona Davidson', '整合專家', '東京', '6200', '2010/10/14', '$327,900'], ['Colleen Hurst', 'Javascript 開發人員', '舊金山', '2360', '2009/09/15', '$205,500'], ['Sonya Frost', '軟體工程師', '愛丁堡', '1667', '2008/12/13', '$103,600'], ['Jena Gaines', '辦公室經理', '倫敦', '3814', '2008/12/19', '$90,560'], ['Quinn Flynn', '支援主管', '愛丁堡', '9497', '2013/03/03', '$342,000'], ['Charde Marshall', '區域總監', '舊金山', '6741', '2008/10/16', '$470,600'], ['Haley Kennedy', '資深行銷設計師', '倫敦', '3597', '2012/12/18', '$313,500'], ['Tatyana Fitzpatrick', '區域總監', '倫敦', '1965', '2010/03/17', '$385,750'], ['Michael Silva', '行銷設計師', '倫敦', '1581', '2012/11/27', '$198,500'], ['Paul Byrd', '財務長 (CFO)', '紐約', '3059', '2010/06/09', '$725,000'], ['Gloria Little', '系統管理員', '紐約', '1721', '2009/04/10', '$237,500'], ['Bradley Greer', '軟體工程師', '倫敦', '2558', '2012/10/13', '$132,000'], ['Dai Rios', '人事主管', '愛丁堡', '2290', '2012/09/26', '$217,500'], ['Jenette Caldwell', '開發主管', '紐約', '1937', '2011/09/03', '$345,000'], ['Yuri Berry', '行銷長 (CMO)', '紐約', '6154', '2009/06/25', '$675,000'], ['Caesar Vance', '售前支援', '紐約', '8330', '2011/12/12', '$106,450'], ['Doris Wilder', '銷售助理', '雪梨', '3023', '2010/09/20', '$85,600'], ['Angelica Ramos', '執行長 (CEO)', '倫敦', '5797', '2009/10/09', '$1,200,000'], ['Gavin Joyce', '開發人員', '愛丁堡', '8822', '2010/12/22', '$92,575'], ['Jennifer Chang', '區域總監', '新加坡', '9239', '2010/11/14', '$357,650'], ['Brenden Wagner', '軟體工程師', '舊金山', '1314', '2011/06/07', '$206,850'], ['Fiona Green', '營運長 (COO)', '舊金山', '2947', '2010/03/11', '$850,000'], ['Shou Itou', '區域行銷', '東京', '8899', '2011/08/14', '$163,000'], ['Michelle House', '整合專家', '雪梨', '2769', '2011/06/02', '$95,400'], ['Suki Burks', '開發人員', '倫敦', '6832', '2009/10/22', '$114,500'], ['Prescott Bartlett', '技術作家', '倫敦', '3606', '2011/05/07', '$145,000'], ['Gavin Cortez', '團隊領導', '舊金山', '2860', '2008/10/26', '$235,500'], ['Martena Mccray', '售後支援', '愛丁堡', '8240', '2011/03/09', '$324,050'], ['Unity Butler', '行銷設計師', '舊金山', '5384', '2009/12/09', '$85,675'], ]; $('#example').DataTable({ columns: [ { title: '姓名' }, { title: '職位' }, { title: '辦公室' }, { title: '分機' }, { title: '開始日期' }, { title: '薪資' } ], data: dataSet });
var dataSet = [ ['Tiger Nixon', '系統架構師', '愛丁堡', '5421', '2011/04/25', '$320,800'], ['Garrett Winters', '會計', '東京', '8422', '2011/07/25', '$170,750'], ['Ashton Cox', '初級技術作家', '舊金山', '1562', '2009/01/12', '$86,000'], ['Cedric Kelly', '資深 Javascript 開發人員', '愛丁堡', '6224', '2012/03/29', '$433,060'], ['Airi Satou', '會計', '東京', '5407', '2008/11/28', '$162,700'], ['Brielle Williamson', '整合專家', '紐約', '4804', '2012/12/02', '$372,000'], ['Herrod Chandler', '銷售助理', '舊金山', '9608', '2012/08/06', '$137,500'], ['Rhona Davidson', '整合專家', '東京', '6200', '2010/10/14', '$327,900'], ['Colleen Hurst', 'Javascript 開發人員', '舊金山', '2360', '2009/09/15', '$205,500'], ['Sonya Frost', '軟體工程師', '愛丁堡', '1667', '2008/12/13', '$103,600'], ['Jena Gaines', '辦公室經理', '倫敦', '3814', '2008/12/19', '$90,560'], ['Quinn Flynn', '支援主管', '愛丁堡', '9497', '2013/03/03', '$342,000'], ['Charde Marshall', '區域總監', '舊金山', '6741', '2008/10/16', '$470,600'], ['Haley Kennedy', '資深行銷設計師', '倫敦', '3597', '2012/12/18', '$313,500'], ['Tatyana Fitzpatrick', '區域總監', '倫敦', '1965', '2010/03/17', '$385,750'], ['Michael Silva', '行銷設計師', '倫敦', '1581', '2012/11/27', '$198,500'], ['Paul Byrd', '財務長 (CFO)', '紐約', '3059', '2010/06/09', '$725,000'], ['Gloria Little', '系統管理員', '紐約', '1721', '2009/04/10', '$237,500'], ['Bradley Greer', '軟體工程師', '倫敦', '2558', '2012/10/13', '$132,000'], ['Dai Rios', '人事主管', '愛丁堡', '2290', '2012/09/26', '$217,500'], ['Jenette Caldwell', '開發主管', '紐約', '1937', '2011/09/03', '$345,000'], ['Yuri Berry', '行銷長 (CMO)', '紐約', '6154', '2009/06/25', '$675,000'], ['Caesar Vance', '售前支援', '紐約', '8330', '2011/12/12', '$106,450'], ['Doris Wilder', '銷售助理', '雪梨', '3023', '2010/09/20', '$85,600'], ['Angelica Ramos', '執行長 (CEO)', '倫敦', '5797', '2009/10/09', '$1,200,000'], ['Gavin Joyce', '開發人員', '愛丁堡', '8822', '2010/12/22', '$92,575'], ['Jennifer Chang', '區域總監', '新加坡', '9239', '2010/11/14', '$357,650'], ['Brenden Wagner', '軟體工程師', '舊金山', '1314', '2011/06/07', '$206,850'], ['Fiona Green', '營運長 (COO)', '舊金山', '2947', '2010/03/11', '$850,000'], ['Shou Itou', '區域行銷', '東京', '8899', '2011/08/14', '$163,000'], ['Michelle House', '整合專家', '雪梨', '2769', '2011/06/02', '$95,400'], ['Suki Burks', '開發人員', '倫敦', '6832', '2009/10/22', '$114,500'], ['Prescott Bartlett', '技術作家', '倫敦', '3606', '2011/05/07', '$145,000'], ['Gavin Cortez', '團隊領導', '舊金山', '2860', '2008/10/26', '$235,500'], ['Martena Mccray', '售後支援', '愛丁堡', '8240', '2011/03/09', '$324,050'], ['Unity Butler', '行銷設計師', '舊金山', '5384', '2009/12/09', '$85,675'], ]; new DataTable('#example', { columns: [ { title: '姓名' }, { title: '職位' }, { title: '辦公室' }, { title: '分機' }, { title: '開始日期' }, { title: '薪資' } ], data: dataSet });
除了上述程式碼外，還會載入以下 Javascript 函式庫檔案以供本範例使用
以下顯示的 HTML 是原始 HTML 表格元素，在 DataTables 加強之前
此範例使用了一些超出從函式庫檔案載入的額外 CSS (如下)，以便正確顯示表格。下面顯示了使用的額外 CSS
載入以下 CSS 函式庫檔案以供本範例使用，以提供表格的樣式
此表格透過 Ajax 載入資料。下面顯示了已載入的最新資料。此資料會在載入任何額外資料時自動更新。
下面顯示了用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。