在我下面发布的示例中,我试图将
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>
解决方法
原文地址:https://www.jb51.cc/jquery/241580.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。