DataTables：难以格式化以删除行

Question

问题：我正在运行一个基本的Web应用程序，以从用户那里获取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的默认功能，即：display compact，hover，strip ...仅默认的“ display”有效。

我希望能够通过class ='stripe'将DataTable的显示设置为条带化表格，但无法通过将'stripe'关键字添加到HTML表的class =“”部分中来实现。 而这就是我迄今为止已阅读的文档中如何显示条纹表示例的示例。 同样在上面，您将看到我已注释掉原始datatables.css文件，并且正在使用“ test.css”文件...它是DataTables1.10.2软件包随附的原始datatables.css文件的精确副本。 复制到我的Web服务器之后，与DataTables包关联的所有其他文件也都保留为“原样”。

除了其他问题之外，这个问题可以像预期的那样起作用，但这将是一个非常好的功能。 这个问题可能会使我无法继续前进，这很烦人。

添加了完整的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将“偶数”和“奇数”类添加到表中的每一行。 您是否尝试过将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 个解决方案

解决方案1
1 2014-09-08 21:11:02

解决方案2
0 2014-09-09 01:27:25

DataTables：难以格式化以删除行

问题描述

2 个解决方案

解决方案1 1 2014-09-08 21:11:02

解决方案2 0 2014-09-09 01:27:25

解决方案1
1 2014-09-08 21:11:02

解决方案2
0 2014-09-09 01:27:25