- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试从所选行的第一列获取数据,
但相反,我烦人地一直“未定义”!
这是我的索引页:
$(document).ready(function() {
var mainDataTable = $("#mainDataTable").DataTable({
"pagingType" : "full_numbers",
"processing" : true,
"serverSide" : true,
"jQueryUI" : true,
"ajax" : "/JsonData",
"columns" : [
{ "data" : "caller" },
{ "data" : "event" },
{ "data" : "receiver" },
{ "data" : "timestamp" }
]
});
$("#mainDataTable tbody").on("dblclick", "tr", function () {
var data = mainDataTable.row().data();
$("#modalDialogBody").html(
'<table class="display jqueryAllCallsDataTable" id="allCalls"><thead><tr>' +
'<th>Timestamp</th><th>Talk Duration</th><th>Receiver</th><th>Type</th></tr>' +
'</thead><tbody><!-- Data will go here --></tbody></table>');
$("#modalDialogTitle").text(data[0] + "#: All Calls");
$("#allCalls").DataTable({
"pagingType": "full_numbers",
"processing": true,
"serverSide": true,
"jQueryUI": true,
"ajax": {
"url": "/JsonData",
"data": function (d) {
d.orderByTimestampDesc = true;
d.callerId = data[0];
}
},
"searching": false,
"ordering": false,
"columns": [
{"data": "timestamp"},
{"data": "talkDuration"},
{"data": "receiver"},
{"data": "type"}
]
});
$("#modalDialog").modal();
});
$("#mainDataTable tbody").on("click", "tr", function() {
var data = mainDataTable.row().data();
$("#modalDialogBody").html(
'<table class="display jqueryCallDetailsDataTable" id="callDetails"><thead>' +
'<tr><th>Caller</th><th>Event</th><th>Receiver</th><th>Timestamp</th></tr>' +
'</thead><tbody><!-- Data will go here --></tbody></table>');
$("#modalDialogTitle").text(data[0] + "#: Regular/Cancelled call");
$("#callDetails").DataTable({
"pagingType": "full_numbers",
"processing": true,
"serverSide": true,
"jQueryUI": true,
"ajax": {
"url": "/JsonData",
"data": function (d) {
d.callerId = data[0];
}
},
"searching": false,
"ordering": false,
"columns": [
{"data": "caller"},
{"data": "event"},
{"data": "receiver"},
{"data": "timestamp"}
]
});
$("#modalDialog").modal();
});
});
有人可以检查一下这个 JavaScript 并告诉我,我做错了什么吗?
顺便说一句,如果您关心的话,模式对话框是使用 Twitter Bootstrap 完成的。
这些是我包含的脚本:
<script type="text/javascript" src="/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/dataTables.jqueryui.min.css"/>
<script type="text/javascript" src="/js/dataTables.jqueryui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
最佳答案
使用此代码。工作正常here .
HTML 代码
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
</tbody>
</table>
JS代码
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('dblclick', 'tr', function () {
var data = table.row( this ).data();
alert( 'You are Double clicked on '+data[0]+'\'s row' );
} );
} );
关于javascript - DataTables rows().data() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39100528/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!