【发布时间】：2014-09-08 21:04:09
【问题描述】：
问题：我有一个基本的网络应用程序正在运行以从用户那里获取一个 ID 号和一个日期，提交所述信息的结果从我的数据库中返回一个数据集。数据格式正确并显示在一个漂亮的 html 表中。我正在使用 DataTables 1.10.2 (http://www.datatables.net/) 来处理我的页面表格的格式。在 datatables .css 文件中，我可以更改颜色并将鼠标悬停在颜色和字体上，我可以根据需要更改列宽，但我无法让行显示为“条纹”演示文稿。这是我的网页的 html 文件（不是全部）：
<!--- jQuery --->
<script src="../DataTables-1.10.2/media/js/jquery.js"></script>
<!--- DataTables --->
<script src="../DataTables-1.10.2/media/js/jquery.dataTables.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/jquery.dataTables.css"> -->
<!--- DataTables CSS --->
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/test.css">
<!--- <link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/jquery.dataTables.css"> --->
<script>
<!--- tells the browser to use DataTablkes to style the html tables --->
$(document).ready( function () {
$('#table_id').dataTable();
});
...
<p>Enter the Advertiser ID and the Date to start at that you wish to report for.</p>
<p>Keep the date in the format YYYY-Mon-DD</p>
<div>
<label>Date :</label>
<!-- <input id="dateSub" type="text" value="YYYY-Mon-DT"> -->
<input id="dateSub" type="text" value="2014-Sep-05">
<label>Advertiser Id :</label>
<input id="adSub" type="text" value="351155">
<input id="button1" type="button" value="Submit">
</div>
<table id="table_id" class="stripe" width="auto" cellspacing="0">
<thead>
<tr>
<th>Hour</th>
<th>Count</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
此代码工作正常，按原样...无需尝试添加到标识 table_id 的脚本中以覆盖 DataTables 的默认功能，即：显示紧凑、悬停、条纹...仅默认的 '显示”的作品。
我希望能够通过 class='stripe' 将 DataTable 的显示设置为条纹表，但无法通过将 'stripe' 关键字添加到 HTML 表的 class="" 部分来实现。而这就是条带表的示例如何在我迄今为止阅读的文档中工作。同样在上面您会看到我注释掉了原始 datatables.css 文件并使用了“test.css”文件...它是 DataTables1.10.2 包随附的原始 datatables.css 文件的精确副本。此外，与 DataTables 包关联的所有其他文件在复制到我的 Web 服务器后都保持“原样”。
除了其他所有问题外，此问题都可以正常工作，但这将是一个非常好的功能。而且这个问题可能会阻碍我进一步发展，并且非常烦人。
添加了完整的 HTML 源文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>:: XXXXXXXXXXXXXXXXXXXXXx ::</title>
<link rel="icon" type="image/jpg" href="../images/icons/small_icon.jpg">
<style>
body {background-color:#C8C8C8;}
<!--- p {color: grey;} --->
</style>
</head>
<!--- loading in our scripts --->
<!--- JQuery --->
<script src="../DataTables-1.10.2/media/js/jquery.js"></script>
<!--- DataTables --->
<script src="../DataTables-1.10.2/media/js/jquery.dataTables.min.js"></script>
<!--- Datatables CSS --->
<!--- <link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/jquery.dataTables.css"> --->
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/test.css">
<script>
$(document).ready( function () { $('#table_id').DataTable(); });
$(document).ready( function () {
////////
$('#button1').click(function(){
console.log('asdfasdf')
var date = $("#dateSub").val();
var adid = $("#adSub").val();
var dataString="adid="+adid+"&"+"qdate="+date;
console.log(date+" "+adid)
$.ajax({
type: "GET",
url: "/",
data: dataString,
cache: false,
success: function(data){
var jsonArr = $.parseJSON(data)
var body=$("#table_id").find('tbody')
console.log('returned')
body.empty()
for (var i=0;i<jsonArr.length;i++){
body.append('<tr><td>'+jsonArr[i].hour+'</td><td>'+jsonArr[i].count+'</td></tr>');
}
}
})
})
/////////
})
</script>
这是我在上面的代码 sn-p 中遗漏的所有内容，也许这将有助于缩小问题范围 :)
【问题讨论】：
标签： javascript jquery datatables-1.10