В настоящее время я работаю над новым веб-приложением Ruby on Rails и мне нужно использовать Datatables.js.Однако в прошлом я не использовал AJAX.
Я использую datatables.js вручную, а не с гемами ajax-datatables / jquery-datatables.Я нашел их слишком сложными для некоторых пользовательских данных в столбцах.
У меня есть данные, считываемые из parent.json
, которые отлично работают на стороне клиента.Однако, как только я изменяю его на serverSide: true
, он загружает и рендерит каждую запись в моей таблице, а не разбивает на страницы, а информация фильтра внизу говорит Showing 0 to 0 of 0 entries (filtered from NaN total entries)
.
My Datatables InitСкрипт
jQuery(document).ready(function() {
var table = $('#parents-datatable').DataTable({
"dom": 'trip',
"serverSide": true,
"retrieve": true,
"processing": true,
"ajax": { url: 'parents.json', dataSrc:''},
"columns": [
{ data: null, render: function(data, row, type, set) { return '<a href="parents/'+ data.id + '">' + data.surname + '</a>'}, searchable: false, orderable: false },
{ data: "first_name" },
{ data: "other_name" },
{ data: null, render: function(data, row, type, set) { return '<a href="mailto: '+ data.email + '">' + data.email + '</a>' }, searchable: false, orderable: false },
{ data: null, searchable: false, orderable: false }
],
columnDefs: [ {
targets: [-1],
render: function(data, row, type, set) {
var arrears = data.current_arrears;
var owing = data.owing_amount;
var next = data.owing_next;
var dd = data.is_direct_debit;
var returnStatement = '';
if(dd == 1) {
returnStatement += '<div class="ui tiny label purple"><i class="laptop icon"></i>DD</div>';
}
if(arrears > 0) {
returnStatement += '<div class="ui tiny label red" data-content="Arrears: $' + arrears +'" data-position="right center"><i class="exclamation triangle icon"></i>ARR</div>';
} else if (owing > 0) {
returnStatement += '<div class="ui tiny label yellow"><i class="flag sign icon"></i>CM</div>';
} else if (next > 0) {
returnStatement += '<div class="ui tiny label black"><i class="dollar sign icon"></i>NM</div>';
} else {
returnStatement += '<div class="ui tiny label green"><i class="check circle outline icon"></i>PAID</div>';
}
return returnStatement;
},
width: "100px"
}],
"pagingType": "simple",
"lengthChange": false,
"pageLength": 10,
"autoWidth": false,
"order": [[0, 'asc'], [1, 'asc']],
"responsive": true,
"renderer": "semanticUI"
});
Мои родители # индекс Код
def index
@parents = Parent.all
respond_to do |format|
format.html
format.json { render json: @parents }
end
end
.. Строка запроса от DevTools
draw: 1
columns[0][data]:
columns[0][name]:
columns[0][searchable]: false
columns[0][orderable]: false
columns[0][search][value]:
columns[0][search][regex]: false
columns[1][data]: first_name
columns[1][name]:
columns[1][searchable]: true
columns[1][orderable]: true
columns[1][search][value]:
columns[1][search][regex]: false
columns[2][data]: other_name
columns[2][name]:
columns[2][searchable]: true
columns[2][orderable]: true
columns[2][search][value]:
columns[2][search][regex]: false
columns[3][data]:
columns[3][name]:
columns[3][searchable]: false
columns[3][orderable]: false
columns[3][search][value]:
columns[3][search][regex]: false
columns[4][data]:
columns[4][name]:
columns[4][searchable]: false
columns[4][orderable]: false
columns[4][search][value]:
columns[4][search][regex]: false
order[0][column]: 0
order[0][dir]: asc
order[1][column]: 1
order[1][dir]: asc
start: 0
length: 10
search[value]:
search[regex]: false
_: 1528287839563
Дайте мне знать, если вам нужно что-нибудь еще.Я весь день просматривал документацию и все еще что-то упускаю.