[英]jQuery Datatable - I keep getting undefined when i call a row data from a json datatable
我目前正在開發自己的項目,使用Laravel作為框架,使用KeenThemes作為前端。 我相信他們的數據表庫有所不同,也許這就是為什么我遇到這個問題。 由於我找不到使用原始數據表文檔來完成此項目的metronic數據表庫的詳細文檔示例。 好的,繼續解決問題。 這是我用於數據表的刀片組件。
<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 im用於呈現和填充數據表。 我要粘貼的部分是我定義搜索數據的功能的地方,也是我想從行中獲取的列的定義。
{
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);
})
我檢查了控制台,還檢查了調試中的值,並且該行返回一個對象,但是,它返回的是整個數據表,而不僅僅是我單擊的行。 當我嘗試從行變量中引用一個值時,在控制台和警報上我都變得不確定。 我想念什么嗎? 提前致謝。
編輯:添加我的json結構
$('#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);
})
這個想法是正確的,但是您的示例中似乎有一些錯別字。
var tr=$(this).parents("tr")[0]
是不需要的,改變row
到this
在var row=t.row(row).data();
console.log(row));
存在語法問題console.log(row));
另外,需要定義t
。
var t = $("#m_datatable").DataTable();
t.on("click", "tr", function () {
var row = t.row(this).data();
console.log(row);
alert(row);
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.