DataTables rows()。data()无法正常工作

时间:2016-08-23 11:57:23

标签: javascript jquery twitter-bootstrap datatables


我正在尝试从所选行的第一列获取数据,
但是我很烦人地继续“未定义”! 这是我的索引页面:

<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>

有人可以查看这个JavaScript并告诉我,我做错了什么吗? 顺便说一句,如果你关心,模态对话框是使用Twitter Bootstrap完成的 这些是我包含的脚本:

var adapter = new DSLocalStorageAdapter();
var store = new JSData.DS();
store.registerAdapter('localstorage', adapter, { default: true });

var Tree = store.defineResource('tree');

Tree.create({
  id: 1,
  apples: {1: 'one', 2: 'two'}
}).then(function(tree){
  tree.apples = {1: 'one'}
  tree.DSSave().then(function(tree){
    console.log(tree.apples) // 
  })
});

3 个答案:

答案 0 :(得分:1)

使用此代码。它工作得很好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' );
} );
} );

答案 1 :(得分:0)

您需要通过提供row selector来指定所需的行。

使用内部行点击处理程序时,您只需使用this

var data = mainDataTable.row(this).data();

答案 2 :(得分:0)

当您使用JSON源data()时,将始终在表单上返回一个或多个对象文字

data = {
  "caller": "value",
  "event": "value",
  "receiver": "value",
  "timestamp": "value"
}

table.row().data()将返回1个这样的文字(第一行),因此data[0]未定义 - data.caller但是将包含返回行中的caller值。