首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery数据表-当我从json数据表调用行数据时,我一直没有定义

jQuery数据表-当我从json数据表调用行数据时,我一直没有定义
EN

Stack Overflow用户
提问于 2019-03-05 01:19:21
回答 2查看 413关注 0票数 1

我目前正在开发一个项目,我使用Laravel作为我的框架,使用KeenThemes作为我的前端。我相信他们有他们的Datatables库的变体,也许这就是我有这个问题的原因。由于我找不到一个记录良好的metronic Datatable库示例,所以我使用原始的Datatable文档来处理这个项目。好了,现在来看问题。这是我的数据表的刀片组件。

代码语言:javascript
复制
<div class="m-portlet m-portlet--mobile  m-portlet--rounded">
<div class="m-portlet__head">
    <div class="m-portlet__head-caption">
        <div class="m-portlet__head-title">
            {{$title}}
        </div>
    </div>
    <div class="m-portlet__head-tools">
        {{$buttons}}
        <ul class="m-portlet__nav">
            <li class="m-portlet__nav-item">
                <div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover"
                    aria-expanded="true">
                    <a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
                                <i class="la la-ellipsis-h m--font-brand"></i>
                            </a>
                    <div class="m-dropdown__wrapper">
                        <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
                        <div class="m-dropdown__inner">
                            <div class="m-dropdown__body">
                                <div class="m-dropdown__content">
                                    <ul class="m-nav">
                                        <li class="m-nav__section m-nav__section--first">
                                            <span class="m-nav__section-text">Acciones</span>
                                        </li>
                                        {{$actions}}
                                        <li class="m-nav__separator m-nav__separator--fit m--hide">
                                        </li>
                                        <li class="m-nav__item m--hide">
                                            <a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">Submit</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="m-portlet__body">

    {{-- begin - search input --}}

    <div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
        <div class="row align-items-center">
            <div class="col-xl-8 order-2 order-xl-1">
                <div class="form-group m-form__group row align-items-center">
                    <div class="col-md-4">
                        <div class="m-form__group m-form__group--inline">
                            <div class="m-form__label">
                                <label>Status:</label>
                            </div>
                            <div class="m-form__control">
                                <select class="form-control m-bootstrap-select" id="m_form_estado">
                                        <option value="">All</option>
                                        <option value="1">En servicio</option>
                                        <option value="6">En Busqueda</option>
                                        <option value="5">En Saneamiento</option>
                                        <option value="3">En Obra</option>
                                        <option value="2">En Instalación</option>
                                        <option value="4">Listo Para Ejecutar</option>
                                        <option value="12">Sin Estado</option>
                                        <option value="14">Caido</option>
                                        <option value="15">Retirado</option>
                                    </select>
                            </div>
                        </div>
                        <div class="d-md-none m--margin-bottom-10"></div>
                    </div>
                    <div class="col-md-4">
                        <div class="m-form__group m-form__group--inline">
                            <div class="m-form__label">
                                <label class="m-label m-label--single">Type:</label>
                            </div>
                            <div class="m-form__control">
                                <select class="form-control m-bootstrap-select" id="m_form_type">
                                        <option value="">All</option>
                                        <option value="1">Online</option>
                                        <option value="2">Retail</option>
                                        <option value="3">Direct</option>
                                    </select>
                            </div>
                        </div>
                        <div class="d-md-none m--margin-bottom-10"></div>
                    </div>
                    <div class="col-md-4">
                        <div class="m-input-icon m-input-icon--left">
                            <input type="text" class="form-control m-input" placeholder="Search..." id="generalSearch">
                            <span class="m-input-icon__icon m-input-icon__icon--left">
                                    <span><i class="la la-search"></i></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- end - search input --}}


    <!--begin: Datatable -->
    <div class="m_datatable" id="m_datatable"></div>

    <!--end: Datatable -->

</div>

现在,这是一些用来渲染和填充表数据的javascript。我要粘贴的部分是定义搜索数据的函数,以及我想要从行中获得的列的定义。

代码语言:javascript
复制
{
   field: "IdEstacion",
   title: "#",
   width: 40,
   sortable: !0,
   selector: !1,
   textAlign: "center",
   responsive: {
      hidden: 'lg'
   },
   template: '{{IdEstacion}}',
   query: {},
   sort: {
      sort: "asc",
      field: "IdEstacion"
   }
   {...}
   $("#m_datatable").on("click", "tr", function () {
      var tr=$(this).parents("tr")[0];
      var row=t.row(row).data();
      console.log(row));
      alert(row);
   })

我已经检查了控制台,也检查了调试程序中的值,并且row返回了一个对象,然而,它返回的不仅仅是我单击的行,而是整个数据表。当我尝试引用row变量中的值时,我在控制台和警报中一直处于未定义状态。我是不是遗漏了什么?提前谢谢。

编辑:添加我的json结构

JSON value #1

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-03-05 04:47:35

代码语言:javascript
复制
 $('#YourTable tbody').on( 'click', 'a', function () {
              var data = '';
              data = YourTable.row( $(this).parents('tr') ).data();
              //to do this your table need to be declared like this
             //yourTable= $('#YourTable').DataTable();
              console.log(data);
              var carId= data['id'];
              console.log(carId);
})
票数 0
EN

Stack Overflow用户

发布于 2019-03-05 23:13:44

这个想法是正确的,但在您的示例中似乎有一些拼写错误。

不需要var tr=$(this).parents("tr")[0],请在var row=t.row(row).data();中将row更改为this

console.log(row));中存在语法问题

此外,还需要定义t

代码语言:javascript
复制
var t = $("#m_datatable").DataTable();

t.on("click", "tr", function () {
      var row = t.row(this).data();
      console.log(row);
      alert(row);
})
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54988374

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档