2011-11-29 32 views
0

我想使用jQuery Datatables分頁查詢,我從數據庫中獲得。使用的查詢涉及很多格式化和連接許多查詢,所以我選擇構建一個完成的數組,我現在試圖爲Datatables格式化。jQuery DataTables根據他們的教程沒有加載javascript數組

在我HXTML我有jQuery和jQuery的數據表插件加載HXTML看起來是這樣的:

<span id='search'> 
</span> 
<script type='text/javascript' > 
$(document).ready(function() { 
    $('#search').html("<table id='search_table' class='tablesorter'></table>"); 
    $('#search_table').dataTable({ 
    'aaData': [ 
    [ 'example status 2', '1', '2011-06-15', '2011-06-15', '2011-06-15', '', 'Bill', 'Father', '1', 'Henry', 'Husband', '1', 'Hamilton Harron Funeral Home', 'Dan Thompson', 'Steve', '1', '2001-05-11', '2', '2003-11-05', 'Non Registrant Test Program - Advantage', '--', '--', '--', 'Onelia', 'Gamboli', 'home', '', 'Houston', 'Texas', '77019', '--', '--', '--', '--', '--', '', 'Pre-Need', 'This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. This is Note 3. ' ] 
    , [ '', '2', '2011-07-02', '2011-07-02', '2011-07-02', '', '--', '--', '--', '--', '--', '--', 'Floral Haven Funeral Home ', 'Jayson Gordon', 'Henry', '3', '2003-12-02', '4', '2004-03-05', 'Non Registrant Test Program - Advantage', '--', '--', '--', 'Leona', 'Brown', 'home', '5110 Rodgewill Rd ', 'Burlington', 'Sussex', '79011', '9023219235', '--', '9026323532', '--', '--', '[email protected]', 'PN to AN', 'This is Note 5. This is Note 5. This is Note 5. This is Note 5. This is Note 5. This is Note 5. This is Note 5. This is Note 5. This is Note 5. This is Note 5. This is Note 5. This is Note 5. This is Note 5. ' ] 
    , [ 'example1 status', '3', '2011-09-05', '2011-09-05', '2011-09-05', '', 'Onelia', 'Wife', '1', '--', '--', '--', 'First Memorial Funeral Services', 'Dan', 'Steve', '5', '2010-11-11', '7', '2011-08-19', 'Non Registrant Test Program - Dignity', '6', '2011-07-03', 'Non Registrant Test Program - Advantage', 'Henry', 'Sale', 'company', '4125 Harvester Rd. 4', 'Sussex', 'Widimer', '72212', '9025229202', '9027205202', '--', '--', '--', '[email protected]', 'At-Need', 'This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. This is Note 6. ' ] 
    ],      
    'aoColumns': [ 
    {  'sTitle': 'Status' } 
    ,{  'sTitle': 'Contact ID Number' } 
    ,{  'sTitle': 'Date Entered' } 
    ,{  'sTitle': 'Date Assigned' } 
    ,{  'sTitle': 'Date Last Modified' } 
    ,{  'sTitle': 'Deceased Date' } 
    ,{  'sTitle': 'Linked To Registrant 1' } 
    ,{  'sTitle': 'Relationship 1' } 
    ,{  'sTitle': 'Authorization 1' } 
    ,{  'sTitle': 'Linked To Registrant 2' } 
    ,{  'sTitle': 'Relationship 2' } 
    ,{  'sTitle': 'Authorization 2' } 
    ,{  'sTitle': 'Location', 'sClass': 'location_cell' } 
    ,{  'sTitle': 'Sales Manager' } 
    ,{  'sTitle': 'Counselor' } 
    ,{  'sTitle': 'Registration Number' } 
    ,{  'sTitle': 'Registration Date' } 
    ,{  'sTitle': 'Program 1 Number' } 
    ,{  'sTitle': 'Program 1 Date', 'sClass': 'program_cell' } 
    ,{  'sTitle': 'Program 1 Name', 'sClass': 'program_cell' }  
    ,{  'sTitle': 'Program 2 Number' } 
    ,{  'sTitle': 'Program 2 Date', 'sClass': 'program_cell' } 
    ,{  'sTitle': 'Program 2 Name', 'sClass': 'program_cell' } 
    ,{  'sTitle': 'First Name' } 
    ,{  'sTitle': 'Last Name' } 
    ,{  'sTitle': 'Address Location 1' } 
    ,{  'sTitle': 'City 1' } 
    ,{  'sTitle': 'State/Province 1' } 
    ,{  'sTitle': 'Zip/Postal Code 1' } 
    ,{  'sTitle': 'Home Phone' } 
    ,{  'sTitle': 'Work Phone' } 
    ,{  'sTitle': 'Mobile Phone' } 
    ,{  'sTitle': 'Pager' } 
    ,{  'sTitle': 'Other Phone' } 
    ,{  'sTitle': 'Sales Type' } 
    ,{  'sTitle': 'Note 1', 'sClass': 'note_cell' } 
    ]     
    }); 
}); 
</script> 

我不知道爲什麼,因爲這數據被格式化幾乎完全一樣的例子中的數據表不創建一個表這裏:Datatable Javascript array example

我想使用DataTable來分頁這些數據。

你能看出爲什麼這不起作用,或者我沒有給你足夠的支持嗎?

回答

1

明確目標<span id="search"></span>(你缺少你的代碼示例一些尖括號中)和清潔代碼位(你有36列和38個數據點)和它應該工作:

http://jsfiddle.net/fvgAU/1/

+0

喜的一直得到剝離代碼或塊引用所以我刪除足夠其格式得到它進入後。我會仔細檢查尖括號和數據單元格。謝謝 – ServerStorm

0

似乎或多或少爲我工作。我不認爲這是問題的初始化,也不是數組。

http://live.datatables.net/ojuhep

將不得不看到它以甚至開始排除故障超出打破了你的一個活生生的例子,我想。看看它的CSS,從其他地方衝突的JS ...

+0

格雷格謝謝你試圖在現場表下!我不知道我能做到這一點,但這是極其有益的。 – ServerStorm

+0

有幫助,就是解決這個問題。 – ServerStorm

0

我能夠得到這個工作。訣竅是最初我在我的網頁底部加載了所有的JavaScript。雖然這通常是很好的做法,但似乎Datatables喜歡在頁面頂部加載。也許它是CSS衝突,所以它需要在CSS應用程序之前加載或它可能只是它需要這個?

感謝大家對此的幫助!

問候, 史蒂夫

+0

很高興聽到它的工作。 ;-) –