[英]dataTables responsive working but no jQuery will work on child row
My buddy at work suggested I use dataTables from data tables.net as a quick drop in turns any table dynamic for searching a sorting purpose which works well with no issue there. 我的工作伙伴建议我使用data table.net的dataTables,因为它可以快速地动态搜索任何表以进行排序,这在没有问题的情况下效果很好。
Problem is that I would like it to be responsive so when viewing the table it will collapse and then like the example on the website ( https://datatables.net/extensions/responsive/ ) when the screens width is small it changes into a few columns with a button to press to show the hidden columns. 问题是我希望它具有响应性,因此在查看表时它将折叠,然后像网站上的示例( https://datatables.net/extensions/sensitive/ )上所示,当屏幕宽度较小时,它将变为几列带有一个按钮的按钮,以显示隐藏的列。 When trying this for myself I get the collapsed columns but no ability to see the hidden ones.
当我自己尝试时,我会看到折叠的列,但看不到隐藏的列。
I am using Codeigniter + foundation 5 to build the tables in. 我正在使用Codeigniter + Foundation 5构建表。
Sample of one of my table in HTML/PHP 我的HTML / PHP表之一的示例
<div class="small-12 medium-12 large-12 columns" align="center">
<table id="table_request" cellspacing="0" width="100%%">
<thead style="background-color: #2573A6">
<th>Customer Name</th>
<th>Email Address</th>
<th>Telephone Number</th>
<th>Quote Message</th>
<th>House Num</th>
<th>Postcode</th>
<th>Quote Day</th>
<th>Accept</th>
<th>Reject</th>
</thead>
<tbody>
<?php foreach ($quotes as $request) {
$i = $request->id;
$dayz = date("y-m-d",strtotime("-3 day"));
$week = date("y-m-d",strtotime("-10 day"));
if(strtotime($request -> day) < strtotime($dayz))
{
echo "<tr class='tbl_row_$i' style='background-color: #ffff00 '>";
}
elseif (strtotime($request -> day) < strtotime($week))
{
echo "<tr class='tbl_row_$i' style='background-color: #990000 '>";
}
else
{
echo "<tr class='tbl_row_$i' style='background-color: #ffffff '>";
}
echo "<input type='hidden' value='$i' name='rowid_$i' id='row_id_$i'>";
echo "<input type='hidden' value='$request->house_post' id='postcode_$i'>";
echo "<input type='hidden' value='$request->house_num' id='house_num_$i'>";
echo "<input type='hidden' value='$request->name' id='name_$i'>";
echo "<input type='hidden' value='$request->email' id='email_$i'>";
echo "<input type='hidden' value='$request->tel_num' id='telnum_$i'>";
echo "<td>" . $request->name . "</td>";
echo "<td><a href='mailto:$request->email'>" . $request->email . "</a></td>";
echo "<td><a href='tel:$request->tel_num'>" . $request->tel_num . "</a></td>";
echo "<td style='width: 40%'>" . $request->message . "</td>";
echo "<td>" . $request->house_num . "</td>";
echo "<td>" . $request->house_post . "</td>";
echo "<td>" . date('F d, Y', strtotime($request->day)) . "</td>";
echo "<td><button type='submit' name='but_accept_$i' num='$i' class='accept_button tiny'>Accept</button></td>";
echo "<td><button type='submit' name='but_reject_$i' num='$i' class='reject_button tiny'>reject</button></td>";
echo "</tr>";
}
?>
</tbody>
</table>
Javascript: 使用Javascript:
$(document).ready(function () {
$("#table_request").dataTable({
responsive:true,
stateSave: true,
"order": [[ 6, "desc" ]]
});
})
I've attempted to replicate the information from the websites example and it collapses just no way to see the hidden columns. 我试图复制网站示例中的信息,但它折叠起来根本看不到隐藏的列。
Thanks in advance for any help. 在此先感谢您的帮助。
UPDATE : 更新:
Reject button example 拒绝按钮示例
$(".reject_button").click(function (e) {
var count = $(this).attr('num');
var row_id = $("#row_id_" + count).attr('value');
var name = $("#name_" + count).attr('value');
var email = $("#email_" + count).attr('value');
var tel = $("#telnum_" + count).attr('value');
var house = $("#house_num_" + count).attr('value');
var postcode = $("#postcode_" + count).attr('value');
$.ajax({
url: "<?php echo base_url();?>admin/reject_job",
type: 'POST',
data: {row_id: row_id, name: name, email: email, telnum: tel, house: house, postcode: postcode},
success: function () {
$(".tbl_row_" + count).css("background-color", "#FF0000");//red
alert("Job Rejected");
},
error: function () {
alert("Error");
}
})
})
This no longer functions when inside a child row on small screens and when not in a child row passes blanks 当在小屏幕上的子行内并且不在子行中时通过空白时,此功能不再起作用
So inspecting the table on the example site, the css selector that creates the green button is as follows: 因此,在示例站点上检查表时,创建绿色按钮的css选择器如下:
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before
So the first-child
selector isn't working because you have the hidden inputs before all the columns . 因此,
first-child
选择器不起作用,因为在所有列之前都有隐藏的输入。 Try moving the hidden inputs somewhere else, like after all the <td>
. 尝试将隐藏的输入移动到其他位置,例如在所有
<td>
。 See fiddle . 见小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.