【问题标题】:How do get data of a row DataTables?如何获取一行DataTables的数据?
【发布时间】:2015-04-10 02:43:01
【问题描述】:

我从 DataTable https://www.datatables.net/ 开始。我使用 lasted DataTable。我可以通过 ajax 将 JSON 字符串中的数据加载到 DataTable。现在我想在连续单击时获取数据。正如您在 http://debug.datatables.net/idihol 看到的 DataTable 调试器 这是我的页面 test.aspx

<table id="div_table" class="display cell-border compact" width="100%">
            <thead>
                <tr>
                    <td>No</td>
                    <td>Name</td>
                    <td>Des</td>
                    <td>LID</td>
                    <td>AID</td>
                    <td>DATE</td>
                    <td>BY</td>
                </tr>
            </thead>
        </table>

这是我的脚本

var table = $('#div_table').DataTable({
                "processing": false,
                "serverSide": false,
                "ajax": {
                    "url": "../BUS/WebService.asmx/LIST_LOCATION",
                    dataSrc: function (json) {
                        return $.parseJSON(json.d);
                    },
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "POST"
                },
                "aoColumns": [  //// 7 columns as Datatable
                    { "mData": null, "aTargets": [0], "sType": "integer", "bSearchable": false, "orderable": false },
                    { "mData": "LOCATION_NAME", "aTargets": [1], "sType": "string" },
                    { "mData": "LOCATION_DES", "aTargets": [2], "sType": "string" },
                    { "mData": "LOCATION_ID", "aTargets": [3], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false },
                    { "mData": "AREA_ID", "aTargets": [4], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false },
                    { "mData": "EDIT_DATE", "aTargets": [5], "sType": "date", "bVisible": false, "bSearchable": false, "orderable": false },
                    { "mData": "EDIT_BY", "aTargets": [6], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false }
                ],
                "order": [[1, 'asc']]
            }); 
            //table.columns([3, 4, 5, 6]).visible(false);           //// disable column 4,5,6,7
            //// create index column 1
            table.on('order.dt search.dt', function () {
                table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
 $('#div_table tbody').on('click', 'tr', function () {    // get full data or some columns at row selected
                $(this).toggleClass('selected');
                var data_ = table.row($(this)).data();
                alert(data_[3] + " and " + data_[4]);
                /// alert(table.row($(this)).data()); error it show info "object object"
            });

运行后,我得到错误“未定义和未定义” 你能告诉我问题并给我建议吗。谢谢。

【问题讨论】:

  • 你导入了 jQuery 吗?当我尝试运行您的代码时,我遇到了“$ 未定义”。
  • =="他发布的代码是从完整代码中分割出来的,如果没有完整代码就无法运行,
  • @Headshot 你确定 $('#div_table tbody').on('click', 'tr', function() 有效吗??
  • 亲爱的 HoangHieu。我确认它有效。如您所见,当我单击一行时,它是切换类(更改该行中的颜色)。但我无法获取行数据。谢谢。
  • 你能告诉我一些问题并给我一些建议吗?谢谢

标签: jquery ajax json datatables-1.10


【解决方案1】:

问题在于,您的 JSON 数据是一个对象数组,具有 LOCATION_NAMELOCATION_DES 等属性,但您尝试使用索引(data_[3]data_[3])检索数据,就好像您的 JSON 数据是数组数组。

来自row().data() 手册页:

函数返回:行的数据源的数据源对象。这将是一个 如果您使用 DOM 源数据,则为数组,否则为数组 / 用于用数据填充表的对象/实例。

您尝试检索的数据将在data_['LOCATION_ID']data_['AREA_ID'] 中提供。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-07-18
    • 2021-10-20
    • 2017-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多