2012-10-11 66 views
1

我有這個表,以這種方式構成:簡明表與Twitter的引導手風琴

HTML部分:

<table id="table_div" class="table table-striped table-condensed"><tbody></tbody></table> 

JS部分:

var data = json_response['data']; 

$("#table_div").html('<thead><tr><td>TIMESTAMP</td><td>VALUE</td></tr></thead>'); 

$.each(data, function(index, value) { 
$('#table_div > tbody:last').append('<tr><td>' + value + '<td></tr>'); 
}); 

此代碼生成我的表twitter引導的風格。現在我希望桌子可以上下滑動,或者由越來越多的頁面組成。

我不知道我是否可以用這種方式使用twitter bootstrap的手風琴工具。或任何其他腳本。你可以幫我嗎?

編輯

的數據變量是這種類型:

var data = [[1348754599, 0.0], [1348754639, 0.0], [1348754680, 0.0], [1348754721, 0.0], [1348754761, 0.0], [1348754802, 0.0], [1348754842, 0.0], [1348754883, 0.0], [1348754924, 0.0], [1348754964, 0.0], [1348755005, 0.0], [1348755045, 0.0], [1348755086, 0.0], [1348755126, 0.0], [1348755167, 0.0], [1348755208, 0.0]]; 

回答

0

你能設置這個小提琴,明確你需要什麼?

更新:必須對原始的小提琴進行一些更正,並且該示例使用了jQuery插件tablesorter。下面是修改後的HTML,使其工作:

<div class="container"> 
    <table class="table table-striped table-bordered table-condensed"></table> 
</div> 

和修訂的JavaScript:

var data = [ 
    [1348754599, 0.0], 
    [1348754639, 0.0], 
    [1348754680, 0.0], 
    [1348754721, 0.0], 
    [1348754761, 0.0], 
    [1348754802, 0.0], 
    [1348754842, 0.0], 
    [1348754883, 0.0], 
    [1348754924, 0.0], 
    [1348754964, 0.0], 
    [1348755005, 0.0], 
    [1348755045, 0.0], 
    [1348755086, 0.0], 
    [1348755126, 0.0], 
    [1348755167, 0.0], 
    [1348755208, 0.0] 
]; 

$('table').html('<thead><tr><th>TIMESTAMP</th><th>VALUE</th></tr></thead><tbody></tbody>'); 

$.each(data, function (index, value) { 
    $('table > tbody').append('<tr><td>' + index + '</td><td>' + value + '</td></tr>'); 
}); 

$(function() { 
    $('table').tablesorter(); 
}); 

這裏是工作示例小提琴:http://jsfiddle.net/jkvr8/41/

+0

在的jsfiddle不工作我不不知道爲什麼。這是代碼:http://jsfiddle.net/jkvr8/。換句話說,我會這樣一個這樣的http://datatables.net/blog/Twitter_Bootstrap_2,就像這個頁面中的表一樣。 – sharkbait

+1

謝謝,我爲任何可能需要這個的人更新了這個例子。 – jonschlinkert