Question

问题：我有一个基本的网络应用程序正在运行以从用户获取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服务器后仍保留为“AS-ARE”。

除了其他一切之外，这个问题可以按照人们的预期进行，但这对于工作来说是一个非常好的功能。而这个问题可能会让我无法继续前进，而且非常烦人。

添加了完整的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>

这是我从上面的代码片段中遗漏的所有内容，也许这有助于缩小问题的范围：）

Answer 1

对我来说，似乎dataTables将'even'和'odd'的类添加到表中的每一行。您是否尝试过对他们应用css规则？

这样的事情似乎应该对我有用：

table tbody tr.even{
    color:#444;
}

因此，例如，当我的表生成时，html最终会看起来像这样。

<table class="dataTable" role="grid" aria-describedby="table_info">
    <thead>
        <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
    </thead>
    <tbody>
        <tr class="odd" role="row">
            <td>1</td>
            <td class=" limitWidth">Dangerously</td>
            <td class=" limitWidth">Johnny</td>
            <td class="sorting_1">08/19/2014</td>
        </tr>
        <tr class="even" role="row">
            <td>2</td>
            <td class=" limitWidth" title="Jingleheimerschmidt">Jingleheimerschmidt</td>
            <td class=" limitWidth">John</td>
            <td class="sorting_1">06/12/2014</td>
        </tr>
    </tbody>
</table>

编辑：我搞砸了。这需要css中的冒号，而不是等号。

Answer 2

在使用数据表之后，我的代码中没有任何内容对我有用 - 所以我创建了一个快速小提琴（http://jsfiddle.net/nrq49ort/1/）你的代码没有什么问题，但奇数行的灰色背景非常微妙 - 所以它可能不会在你的屏幕上显示？我设置了以下css - 不是很漂亮，但至少它很难错过;）

.odd {
      background-color: red !important;
}

DataTables：格式化条带行的麻烦

2 个答案: