在我下面发布的示例中,我试图将
jquery.sparkline库中的迷你图呈现为jquery.dataTables表中的数据列.加载下面的示例工作得很好但仅适用于第一页.如果我单击“下一步”而不是将数据渲染为迷你图,则只需渲染数字.如果我单击“上一个”,则会显示初始设置的迷你图.如果我排序,我会得到两者的组合.
我是这两个图书馆的新手,我试图在这个论坛以及其他人寻找解决方案,到目前为止,我的研究结果都没有解决我的问题.谁知道我做错了什么?
谢谢你的任何建议!
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" title="currentStyle"> @import "http://datatables.net/release-datatables/media/css/demo_page.css"; @import "http://datatables.net/release-datatables/media/css/jquery.dataTables.css"; td.right { text-align: right; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script> <script type="text/javascript" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script> <script type="text/javascript" src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>'); $('#example').dataTable({ "aaSorting": [],"aaData": [ ["0,1,2,3,4"],["4,0"],["0,0"] ],"aoColumns": [ { "sTitle": "Sparkline","sClass": "center" } ],"aoColumnDefs": [ { "aTargets": [0],"mRender": function (data,type,full) { return '<span class="spark">' + data + '</span>' } } ],"fnInitComplete": function (oSettings,json) { $('.spark').sparkline('html',{ type: 'line',minSpotColor: 'red',maxSpotColor: 'green',spotColor: false }); } }); }); </script> </head> <body id="dt_example"> <div id="container"> <div id="dynamic"></div> <div class="spacer"></div> </div> </body> </html>