Я пытаюсь получить свой второй datatable, чтобы использовать свой собственный css (для цвета чередующихся строк), как только я добавил {sClass: "myCustomClass"}, мой jquery больше не стреляет.
Css для demo_table.css
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DataTables row classes
*/
table.display tr.odd.gradeA {
background-color: #ddffdd;
}
table.display tr.even.gradeA {
background-color: #eeffee;
}
table.display tr.odd.gradeC {
background-color: #ddddff;
}
table.display tr.even.gradeC {
background-color: #eeeeff;
}
table.display tr.odd.gradeX {
background-color: #ffdddd;
}
table.display tr.even.gradeX {
background-color: #ffeeee;
}
table.display tr.odd.gradeU {
background-color: #ddd;
}
table.display tr.even.gradeU {
background-color: #eee;
}
tr.odd {
background-color: #E2E4FF;
}
tr.even {
background-color: white;
}
table.display tr.even.myCustomClass { background-color: #FFFFCC; }
table.display tr.odd.myCustomClass { background-color: #ffeeee; }
Jquery Я использую для инициализации datatable, который отлично работал, прежде чем добавлять класс, но не имел ни одного из css, которое я добавил.
function nestedtable(systemid) {
var dbselected = $('#dblist').find(":selected").text();
$('#nested_id').dataTable({
"sAjaxSource": '/php/connect/nestedsearchtablequery.php',
"bProcessing": true,
"bDeferRender": true,
"bDestroy": true,
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": dbselected}),
aoData.push({ "name": "systemid", "value": systemid });
},
"aoColumns": [
{ sClass: "myCustomClass" },
{ "mData": "eventtime" },
{ "mData": "eventtype" },
{ "mData": "cid_name" },
{ "mData": "cid_num" },
{ "mData": "cid_ani" },
{ "mData": "cid_dnid" },
{ "mData": "exten" },
{ "mData": "context" },
{ "mData": "appname" },
{ "mData": "channame" }, ]
//"bJQueryUI": true //This is commented out to remove the smooth datatable style
});
}
У меня есть две таблицы #table_id и #nested_id, я пытаюсь изменить цвета строк на #nested_id.
Это jquery для #nested_id
function fnFormatDetails(oTable, nTr, systemid) {
var sOut =
'<div class="innerDetails">' +
'<table id="nested_id" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px; background:white;">' +
'<thead>'
+ '<tr>'
+ '<th>Time</th>'
+ '<th>Event</th>'
+ '<th>CNAM</th>'
+ '<th>CNUM</th>'
+ '<th>ANI</th>'
+ '<th>DID</th>'
+ '<th>Exten</th>'
+ '<th>Context</th>'
+ '<th>AppName</th>'
+ '<th>Channel</th>'
+ '</tr>'
+ '</thead>'
+ '<tbody></tbody>'
'</table>' +
'</div>';
return sOut;
}
Это html для #table_id
<body>
<div id="stable" style=" margin-left: 2%; margin-right: 2%; display: none">
<table class="display" id="table_id">
<thead>
<tr>
<th>Call Date</th>
<th>Recording</th>
<th>System</th>
<th>CallerID</th>
<th>App</th>
<th>Destination</th>
<th>Disposition</th>
<th>Duration</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
Я думаю, что проблема в вашем CSS... sClass
ставит класс на каждый td
в столбце, а не в tr
. Поэтому tr.even.myCustomClass
никогда не применяется.
Это должно быть больше похоже:
table.display tr.even td.myCustomClass { background-color: #FFFFCC; }
table.display tr.odd td.myCustomClass { background-color: #ffeeee; }
EDIT, основанный на обновлении до OP
Вы можете избежать совместного использования sClass и просто использовать CSS для вашей вложенной таблицы:
Ваша таблица в вашем html отсутствует class="display"
. Таким образом, вы можете добавить и CSS:
table.display#nested_id tr.even { background-color: #FFFFCC; }
table.display#nested_id tr.odd { background-color: #ffeeee; }
Или вы можете оставить его, и ваш CSS:
table#nested_id tr.even { background-color: #FFFFCC; }
table#nested_id tr.odd { background-color: #ffeeee; }
Наконец, вам нужно добавить CSS для
table#nested_id tr.even .sorting_1{ /*background-color here*/ }
table#nested_id tr.odd .sorting_1{ /*background-color here*/ }
См. Этот jsfiddle для рабочего примера.