html5 - datatables 加載不出來(lái)數(shù)據(jù)。
問(wèn)題描述
我在后臺(tái)已經(jīng)請(qǐng)求到了json數(shù)據(jù),如下`
[{'aid':100000,'name':'JYCM201609010250','rtsp':'947|100000|3750','statuz':'1','updateTime':'2017-05-31'},{'aid':100001,'name':'gui','rtsp':'947|100000|3750','statuz':'0','updateTime':'2017-05-31'}]
下面是我的js 代碼
<script> $(document).ready(function () {$(’#table_id_example’).DataTable({ 'iDisplayLength': 10, 'bLengthChange': false, 'ajax': {'url': '/media','dataType': 'json','success': function (json) { console.log(json)} }, 'columns': [{ 'data': ’aid’},{ 'data': ’name’},{ 'data': ’rtsp’},{ 'data': ’statuz’},{ 'data': ’updateTime’} ]}); });</script>
后臺(tái)代碼
@Autowired private MediaImpl media; @ResponseBody @RequestMapping(value = '/media',method = RequestMethod.GET) public List<Media> MediaAll(){System.out.println('------------------------------------------------------');return media.findAll(); }
html代碼
<link rel='stylesheet' href='http://m.cgvv.com.cn/css/jquery.dataTables.css' th:href='http://m.cgvv.com.cn/wenda/@{css/jquery.dataTables.css}'/><script type='text/javascript' src='http://m.cgvv.com.cn/js/jquery.min.js' th:src='http://m.cgvv.com.cn/wenda/@{/js/jquery.min.js}'></script><script type='text/javascript' src='http://m.cgvv.com.cn/js/jquery.dataTables.js' th:src='http://m.cgvv.com.cn/wenda/@{js/jquery.dataTables.js}'></script><body><table cellspacing='0' width='100%'> <thead> <tr><th>媒資ID</th><th>媒資名稱(chēng)</th><th>播放串</th><th>狀態(tài)</th><th>更新時(shí)間</th> </tr> </thead> <!-- <tbody> <tr><td>Row 1 Data 1</td><td>Row 1 Data 1</td><td>Row 1 Data 1</td><td>Row 1 Data 1</td><td>Row 1 Data 1</td> </tr></tbody>--></table></body>
前后臺(tái)都沒(méi)有報(bào)錯(cuò)，但就是顯示不出來(lái)數(shù)據(jù)。請(qǐng)問(wèn)是少配置還是那塊書(shū)寫(xiě)錯(cuò)誤，謝謝
問(wèn)題解答
回答1：用過(guò)這個(gè)插件，你還要加一個(gè)datasrc說(shuō)明，獲取成功之后，從哪提數(shù)據(jù)。（修正，可能不是datasrc的原因,但看著又像是沒(méi)加這個(gè)的原因）這是我用到的代碼，看是否能給你點(diǎn)啟示：`$.ajax({
type:’GET’,***/*省略某些代碼*/*** success:function(result){ /*聲明一個(gè)空對(duì)象*/ var returnData = {}; returnData.data = result.rows //數(shù)據(jù)來(lái)源 callback(returnData) //此步不能省略，最重要的就是調(diào)用callback }
})`
回答2：官網(wǎng)上對(duì)獲取的json數(shù)據(jù)有這種要求
By default DataTables will look for the property data (or aaData for compatibility with DataTables 1.9-) when obtaining data from an Ajax source or for server-side processing
也就是說(shuō)你那個(gè)包含各個(gè)數(shù)據(jù)的數(shù)組應(yīng)該放在data屬性里，這樣應(yīng)該就可以了
{'data':[{'aid':100000,'name':'JYCM201609010250','rtsp':'947|100000|3750','statuz':'1','updateTime':'2017-05-31'},{'aid':100001,'name':'gui','rtsp':'947|100000|3750','statuz':'0','updateTime':'2017-05-31'}]}
data同級(jí)還可以放別的如條目總數(shù)等的參數(shù)
相關(guān)文章：
1. css - C#與java開(kāi)發(fā)Windows程序哪個(gè)好？2. mysql無(wú)法添加外鍵3. css - 定位為absolute的父元素中的子元素 如何設(shè)置在父元素的下面？4. java - Mybatis查詢(xún)數(shù)據(jù)庫(kù)時(shí)出現(xiàn)查詢(xún)getInt(）的錯(cuò)誤5. JavaScript事件6. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?7. javascript - es6將類(lèi)數(shù)組轉(zhuǎn)化成數(shù)組的問(wèn)題8. 在mac下出現(xiàn)了兩個(gè)docker環(huán)境9. css3 - flex 父標(biāo)簽設(shè)置align-item:center,子元素flex：1，不起作用10. java - 是否類(lèi) 類(lèi)型指針、引用作為形參 ，函數(shù)結(jié)束不會(huì)自動(dòng)析構(gòu)類(lèi)？
網(wǎng)公網(wǎng)安備