Поместите новые строки в определенную позицию jQuery datatable
по умолчанию
Я создаю ajax datatable
, какие строки иногда заполняются json в конце таблицы:jsfiddle и иногда в верхней части таблицы. Это зависит от времени ответа AJAX.
РЕКОМЕНДУЕМЫЙ ВЫХОД
У меня есть два входных jsons из двух разных источников, а выход-это таблица:
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
...
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row-->
<tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row-->
<tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row-->
<tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row-->
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
...
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
строки 2. json вставляются в таблицу (создается из 1. json) на определенную позицию. Эта позиция константа, длина 1. и 2. данные JSON являются постоянными.
ПЕРВОЕ РЕШЕНИЕ
Я должен добавить первый столбец, содержащий число, и отсортировать datatable по убыванию - jsfiddle. Я могу скрыть первую колонку jsfiddle, но я скорее использую пользовательскую функцию, потому что она не работает в IE8.
var t = $("#tab1").DataTable({
"ajax": "data1.json",
columnDefs: [
{ className: "hide", "targets": [ 0 ] },
],
"columns": [
{ "data": "id"},
{ "data": "cat1"},
{ "data": "cat2"},
{ "data": "cat3"}
]
});
$.ajax({
type: "GET",
url: "data2.json",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
t.rows.add(response.data);
t.draw();
}
});
ИДЕЯ-ПОЛЬЗОВАТЕЛЬСКАЯ ФУНКЦИЯ
Я пытаюсь создать пользовательскую функцию rows.addinposition(rows, position)
, но он работает как функция rows.add()
.
Я скопировал и изменил строки функций.добавить найдено в jquery.dataTables.js
at линия 7879, я изменил out.push()
to out.splice()
splice docs.
Я знаю, это не рекомендуется, лучше расширить datatables api...
_api_register( 'rows.addinposition()', function ( rows, position ) {
var newRows = this.iterator( 'table', function ( settings ) {
var row, i, ien;
var out = [];
for ( i=0, ien=rows.length ; i<ien ; i++ ) {
row = rows[i];
if ( row.nodeName && row.nodeName.toUpperCase() === 'TR' ) {
//ROWS.ADD USE OUT.PUSH
//out.push( _fnAddTr( settings, row )[0] );
//CHANGED TO OUT.SPLICE
out.splice( position, 0, _fnAddTr( settings, row )[0] );
}
else {
out.splice( position, 0, _fnAddData( settings, row ) );
}
}
console.log(out);
return out;
}, 1 );
// Return an Api.rows() extended instance, so rows().nodes() etc can be used
var modRows = this.rows( -1 );
modRows.pop();
modRows.push.apply( modRows, newRows.toArray() );
return modRows;
} );
было бы здорово, если бы вы могли помочь мне.
Я нашел похожие вопросы:
-
ссылка: функция
fnAddData()
в версии 1.9 Объекты DataTable - ссылка - добавить несколько строк в конец datatable
- ссылка - нет ответа
- datatables форум ссылка - старая версия, нет ответа (я так думаю)
редактировать
Спасибо davidkonrad, но я тестирую его в jsfiddle, и я нашел 2 проблемы:
- заказ неправильный 2.,1. не 1.,2. - Я думаю, легко проблема
- иногда эти добавленные строки находятся в верхней части таблицы, Иногда в правильном положении. Случайным образом. - может быть, большая проблема
Я отлаживаю его в jsfiddle и его поведение очень странное:
console.log('rowCount = '+rowCount);
если строки находятся сверху (плохое положение) вернуться:
rowCount = 0
rowCount = 1
и for
не петля, потому что firebug не показывает var i
.
если они находятся в хорошем положении, возвращение:
rowCount = 5
rowCount = 6
и for
петельные и var i
возвращается в этом примере:
1. петля:
i = 5
i = 4
i = 3
2.петля:
i = 6
i = 5
i = 4
i = 3
Я что-то пропустил? Почему порядок странен?
2 ответов
решение
Я считаю, что вам нужно использовать jQuery $.when
функция для выполнения обратного вызова, когда оба вызова Ajax были успешными.
таким образом, вы получите данные всегда в таком же заказе и никакая потребность написать функции для того чтобы ввести данные на специфическом положении.
кроме того, при необходимости вы можете управлять конечными данными перед инициализацией таблицы данных с ним. Например, ниже приведены только два варианта, возможности безграничны.
добавить данные из call2
данным call1
:
var data = a1[0].data.concat(a2[0].data);
для вставки данных из call2
на должность 2
данных call1
(источник):
var data = a1[0].data;
data.splice.apply(data, [2, 0].concat(a2[0].data));
демо
см. пример ниже код и демонстрация.
$(document).ready(function(){
var call1 = $.ajax({
url: "https://api.myjson.com/bins/48g56",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
});
var call2 = $.ajax({
url: "https://api.myjson.com/bins/1bfa2",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
});
// When both Ajax requests were successful
$.when(call1, call2).done(function(a1, a2){
// a1 and a2 are arguments resolved for the call1 and call2 ajax requests, respectively.
// Each argument is an array with the following structure: [ data, statusText, jqXHR ]
// Append data from call2 to data from call1
// var data = a1[0].data.concat(a2[0].data);
// Insert data from call2 at position 2 of data from call1
var data = a1[0].data;
data.splice.apply(data, [2, 0].concat(a2[0].data));
// Initialize data table
var t = $("#tab1").DataTable({
data: data,
columnDefs: [
{ className: "hide", "targets": [ 0 ] },
],
order: [],
ordering: false,
columns: [
{ "data": "id"},
{ "data": "cat1"},
{ "data": "cat2"},
{ "data": "cat3"}
]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet"/>
<table id="tab1" class='data tab01'>
<thead>
<tr>
<th>id</th>
<th>cat1</th>
<th>cat2</th>
<th>cat3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
вам не нужно изменять исходный код напрямую, используйте dataTable.Api.register
вместо :
jQuery.fn.dataTable.Api.register('row.addByPos()', function(data, index) {
var currentPage = this.page();
//insert the row
this.row.add(data);
//move added row to desired index
var rowCount = this.data().length-1,
insertedRow = this.row(rowCount).data(),
tempRow;
for (var i=rowCount;i>=index;i--) {
tempRow = this.row(i-1).data();
this.row(i).data(tempRow);
this.row(i-1).data(insertedRow);
}
//refresh the current page
this.page(currentPage).draw(false);
});
вышеуказанная функция (или плагин) вставляет строку, а затем "перемещает" строку в нужное положение, просто меняя содержимое -> Читать далее подробное объяснение.
Демо -> http://jsfiddle.net/p4wcfzfe/
поскольку плагин добавляет функцию к общему API, плагин должен быть объявлен до инициализация любого dataTable с помощью этой функции.
{ plugin declaration }
var table = $("#example").DataTable();
table.row.addByPos([data], 1);
NB: ваше "первое решение" также должно работать в IE8, попробуйте удалить конечные запятые.