Jquery + ajax + php не может получить данные в таблице (обработка на стороне сервера)

Я использую Dataatable после этого примера https://datatables.net/examples/data_sources/server_side.html

Итак, мой стол:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="tabellaGlossario">
<thead>
<th>
<td>Voce</td>
<td>Sinonimi</td>
<td>Sigla</td>
<td>Macrosettore</td>
<td>Microsettore</td>
<td>Sinonimi</td>
<td>Sigla</td>
<td>Macrosettore</td>
<td>Microsettore</td>
</th>
</thead>
<tfoot>
<th>
<td>Voce</td>
<td>Sinonimi</td>
<td>Sigla</td>
<td>Macrosettore</td>
<td>Microsettore</td>
<td>Sinonimi</td>
<td>Sigla</td>
<td>Macrosettore</td>
<td>Microsettore</td>
</th>
</tfoot>
</table>

Мой JS:

oTable = $('#tabellaGlossario').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""f>t<"F"lp>',
"processing": true,
"serverSide": true,
"ajax": "Modules/Glossario/View/Glossario.Table.View.php?lingua_select=2",
});

Мой аякс вернулся:

{
"draw": 1,
"recordsTotal": 1,
"recordsFiltered": 1,
"data": [
[
"1",
"2",
"1",
"1",
"1",
"Parola italiana",
"Sinonimo italiano",
"Sigla ita",
"Note ita"]
]
}

Моя проблема в том, что я всегда получаю «Нет данных в таблице» в виде результатов таблицы. Но, как вы можете видеть, у ajax есть некоторые результаты (1 в этом примере).
Кажется, мой код такой же, как в официальном примере.

Не могу понять, почему данные не отображаются в таблице (и я не получаю ошибки в консоли браузера).

1

Решение

Используете ли вы динамическую загрузку или какой-либо маршрутизации?
Например, angularjs ngroute или некоторые рамки.

В этом случае это не может работать (не так, как вы делаете). Вы можете следовать некоторому руководству, как этот или пример, как это http://jsfiddle.net/qu4a7j24/3/

<div ng-app='testTableApp'>

<div class="container">
<div ng-controller="mainTable">
<form action="" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<legend>Filters</legend>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input type="text" value="0" ng-change='reloadData()' ng-model="start">
<input type="text" value="50" ng-change='reloadData()' ng-model="end">

</div>
</div>
</form>

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table>
</div>
</div>
</div>

var testTableApp = angular.module( 'testTableApp', ['ngRoute', 'ngResource', 'datatables', 'datatables.tabletools', 'datatables.bootstrap', 'datatables.fixedheader'] );
console.log( testTableApp );
testTableApp.controller("mainTable",
[ '$scope', 'DTOptionsBuilder', 'DTColumnBuilder',
function ( $scope, DTOptionsBuilder, DTColumnBuilder){
$scope.dataSource = "http://dt.ishraf.com/ajax.php";
$scope.start = 0;
$scope.end = 5000;$scope.getDataSource = function(obj,prefix){
var src = $scope.dataSource;

var str = [];
for(var p in obj) {
if (obj.hasOwnProperty(p)) {
var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
str.push(typeof v == "object" ?
serialize(v, k) :
encodeURIComponent(k) + "=" + encodeURIComponent(v));
}
}
return src + "?" + str.join("&");
}

var dsParams = {
start : $scope.start,
end : $scope.end
}

$scope.dsString = $scope.getDataSource( dsParams );$scope.buildTable = function(){
return DTOptionsBuilder
.newOptions()
.withOption('ajax', {
// Either you specify the AjaxDataProp here
dataSrc: 'data',
url: $scope.dsString,
type: 'POST'
}).
withOption( 'lengthMenu', [
[10, 20, 50, 100, 150, 300, 500],
[10, 20, 50, 100, 150, 300, 500]
])
.withTableTools('bower_components/datatables-tabletools/swf/copy_csv_xls_pdf.swf')
.withTableToolsButtons([
{
"sExtends": "copy",
"sButtonText": "<i class='fa fa-copy'></i>&nbsp;|&nbsp;Copy",
"fnInit": function (nButton, oConfig) {
$(nButton).addClass('btn btn-success');
}
},
{
"sExtends": "print",
"sButtonText": "<i class='fa fa-print'></i>&nbsp;|&nbsp;Print",
"fnInit": function (nButton, oConfig) {
$(nButton).addClass('btn btn-danger');
}
},
{
"sExtends": "csv",
"sButtonText": "<i class='fa fa-file-o'></i>&nbsp;|&nbsp;CSV",
"fnInit": function (nButton, oConfig) {
$(nButton).addClass('btn btn-primary');
}
},
{
"sExtends": "pdf",
"sButtonText": "<i class='fa fa-file-pdf-o'></i>&nbsp;|&nbsp;PDF",
"fnInit": function (nButton, oConfig) {
$(nButton).addClass('btn btn-warning');
}
}
])
.withFixedHeader({
bottom: true
})
.withDOM('<"clear"><"#top.hidden-print"<".row"<".col-md-6"i><".col-md-6"f>><".row"<".col-md-6"l><".col-md-6"p>><"clear">T>rt')
;
}$scope.dtOptions = $scope.buildTable();

$scope.buildColumns = function(){
return [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
DTColumnBuilder.newColumn('city').withTitle('city'),
DTColumnBuilder.newColumn('state').withTitle('state'),
DTColumnBuilder.newColumn('zip').withTitle('zip'),
DTColumnBuilder.newColumn('country').withTitle('country'),
DTColumnBuilder.newColumn('phone').withTitle('phone'),
DTColumnBuilder.newColumn('email').withTitle('email')
];
}

$scope.dtColumns = $scope.buildColumns();$scope.reloadData = reloadData;
$scope.dtInstance = {};

function reloadData() {
var resetPaging = false;
$scope.dtInstance.reloadData(callback, resetPaging);
}

function callback(json) {
console.log(json);
}

}
]);

или просто динамически создать таблицу (.load JQuery может быть полезным)

0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]