有没有办法在可编辑的数据表中从服务器获取 aocolumns?
Is there a way to get aocolumns from the server in datatable editable?
因此,我正在尝试为用户请求的任何 table 创建一个通用页面。为此,我试图从服务器获取所有数据,而不是在客户端进行任何硬编码。
$(document).ready(function(){
/* Add/remove class to a row when clicked on */
$('#table1 tr').on('click', function() {
$(this).toggleClass('row_selected');
} );
var which_table=window.location.pathname;
var which_table_data=which_table.substring(0, which_table.length-1)+'/data';
var table_name=which_table.substring(14, which_table.length-1);
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bjQueryUI": true,
"sScrollX":"100%",
"aoColumnDefs": [{
"targets" : [0],
"visible" : false,
"searchable" : false
}]
}).makeEditable({
"sUpdateURL": "../update/" + table_name,
"sAddURL": "../add/" + table_name,
"sDeleteURL": "../delete/" + table_name,
"aoColumns": $.ajax({
dataType: "json",
url: '/get_aoColumns',
data: function (table_name) {
return {
q: table_name
};
},
results: function (data) {
alert(data);
}
});
});
});
所以在这篇基于var which_table=window.location.pathname;
的文章中,我尝试从我成功的服务器中获取对应的table的数据。但现在我什至想从服务器获取 aoColumns 数组。我的问题是我能否在同一请求中发送数据以及 aoData、secho 和其他必填字段。我认为这可能无法正确呈现数据 table,因为 aoColumns 不是所需 json 的一部分。我如何获得任何 table 的 aoColumns,以便即使验证成为服务器端,我也不必为每个 table.
设计一个页面
下面这部分不起作用,因为我不知道正确的做法是什么
"aoColumns": $.ajax({
dataType: "json",
url: '/get_aoColumns',
已编辑:-
我尝试了@garryp 的方法..
这是我从服务器
获取的数据
[{"cssclass": "required", "type": "textarea"}, {"sUpdateURL": "../update/my_table", "cssclass": "required", "type": "textarea", "loadtype": "POST", "submit": "OK"}, {"loadurl": "../data/", "sUpdateURL": "../update/my_table", "loadtype": "POST", "type": "select", "submit": "OK"}]
这是我的 代码 :
$(document).ready(function(){
/* Add/remove class to a row when clicked on */
$('#table1 tr').on('click', function() {
$(this).toggleClass('row_selected');
} );
var which_table=window.location.pathname;
var which_table_data=which_table.substring(0, which_table.length-1)+'/data';
var table_name=which_table.substring(14, which_table.length-1);
if(table_name.indexOf('Welog')> -1) {
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bjQueryUI": true,
"sScrollX": "100%"
});
$('#formAddNewRow').hide();
}
else {
$.ajax({
url: '../get_aodata/' + table_name,
async: false,
success: function (data) {
alert(data);
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bjQueryUI": true,
"sScrollX": "100%",
"aoColumnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}]
}).makeEditable({
"sUpdateURL": "../update/" + table_name,
"sAddURL": "../add/" + table_name,
"sDeleteURL": "../delete/" + table_name,
"sAddDeleteToolbarSelector": "#table1_length",
"aoColumns" : data
/*"aoColumns" : [
{
"cssclass": "required",
"type":"textarea"
},
{
"cssclass": "required",
"type":"textarea",
"submit" : "OK",
"sUpdateURL": "../update/"+table_name,
"loadtype" : "POST"
},
{
"loadurl" : "../data/",
"type" : "select",
"submit": "OK",
"sUpdateURL": "../update/"+table_name,
"loadtype" : "POST"
}
]*/
});
}
});
}
});
因此,如果您看到此代码中注释掉的 aoColumns 与从服务器获得的输出完全相同,但是从服务器获得的输出在 makeditable 函数。这是否意味着数据未达到该参数,因为我在控制台中没有收到任何错误。
解决方案:-
success : function(data){
var data_str= JSON.parse(data);
});
好的。我不得不使用 parse 将 json 字符串转换为 JSobject,然后它终于起作用了。
它不起作用,因为您在这里将 $.ajax(...)
的 return 值分配给 aoColumns
(当您实际上需要将列数组分配给 "aoColumns"):
}).makeEditable({
...
"aoColumns": $.ajax({
相反,您需要做的是首先调用 AJAX。然后,在 jQuery success
函数中设置你的数据表。
$.ajax({
url: '/get_aoColumns',
...
success : function(data) {
// ToDo: put all your datatable code in here.
// and assign `data` to "aoColumns"
/** data table code **/
}).makeEditable({
"aoColumns": data
/** rest of data table code **/
}
除了重要的部分,我已尝试保留所有内容以使关键点清晰,但这应该有助于您了解哪里出了问题。
我在这里设置了一个 JS Fiddle,如果这没有意义的话,还有一个(未经测试的)代码示例:
假设 /get_aoColumns
正确返回所有内容,看起来您想先获取该信息,然后在成功处理程序中创建数据表。在你上面的代码中,看起来 dataTables 声明可以在 ajax 请求有机会完成之前完成,那么这个怎么样:
$(document).ready(function () {
/* Add/remove class to a row when clicked on */
$('#table1 tr').on('click', function () {
$(this).toggleClass('row_selected');
});
var which_table = window.location.pathname;
var which_table_data = which_table.substring(0, which_table.length - 1) + '/data';
var table_name = which_table.substring(14, which_table.length - 1);
//wrap the ajax request to get aoColumns outside of the initializaer
$.get('/get_aoColumns', {q: table_name}, function (aoColumns) {
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"aoColumnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}]
}).makeEditable({
"sUpdateURL": "../update/" + table_name,
"sAddURL": "../add/" + table_name,
"sDeleteURL": "../delete/" + table_name,
"aoColumns": aoColumns //the data retrieved from the request to get_aoColumns
});
});
});
因此,我正在尝试为用户请求的任何 table 创建一个通用页面。为此,我试图从服务器获取所有数据,而不是在客户端进行任何硬编码。
$(document).ready(function(){
/* Add/remove class to a row when clicked on */
$('#table1 tr').on('click', function() {
$(this).toggleClass('row_selected');
} );
var which_table=window.location.pathname;
var which_table_data=which_table.substring(0, which_table.length-1)+'/data';
var table_name=which_table.substring(14, which_table.length-1);
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bjQueryUI": true,
"sScrollX":"100%",
"aoColumnDefs": [{
"targets" : [0],
"visible" : false,
"searchable" : false
}]
}).makeEditable({
"sUpdateURL": "../update/" + table_name,
"sAddURL": "../add/" + table_name,
"sDeleteURL": "../delete/" + table_name,
"aoColumns": $.ajax({
dataType: "json",
url: '/get_aoColumns',
data: function (table_name) {
return {
q: table_name
};
},
results: function (data) {
alert(data);
}
});
});
});
所以在这篇基于var which_table=window.location.pathname;
的文章中,我尝试从我成功的服务器中获取对应的table的数据。但现在我什至想从服务器获取 aoColumns 数组。我的问题是我能否在同一请求中发送数据以及 aoData、secho 和其他必填字段。我认为这可能无法正确呈现数据 table,因为 aoColumns 不是所需 json 的一部分。我如何获得任何 table 的 aoColumns,以便即使验证成为服务器端,我也不必为每个 table.
下面这部分不起作用,因为我不知道正确的做法是什么
"aoColumns": $.ajax({
dataType: "json",
url: '/get_aoColumns',
已编辑:-
我尝试了@garryp 的方法..
这是我从服务器
获取的数据[{"cssclass": "required", "type": "textarea"}, {"sUpdateURL": "../update/my_table", "cssclass": "required", "type": "textarea", "loadtype": "POST", "submit": "OK"}, {"loadurl": "../data/", "sUpdateURL": "../update/my_table", "loadtype": "POST", "type": "select", "submit": "OK"}]
这是我的 代码 :
$(document).ready(function(){
/* Add/remove class to a row when clicked on */
$('#table1 tr').on('click', function() {
$(this).toggleClass('row_selected');
} );
var which_table=window.location.pathname;
var which_table_data=which_table.substring(0, which_table.length-1)+'/data';
var table_name=which_table.substring(14, which_table.length-1);
if(table_name.indexOf('Welog')> -1) {
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bjQueryUI": true,
"sScrollX": "100%"
});
$('#formAddNewRow').hide();
}
else {
$.ajax({
url: '../get_aodata/' + table_name,
async: false,
success: function (data) {
alert(data);
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bjQueryUI": true,
"sScrollX": "100%",
"aoColumnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}]
}).makeEditable({
"sUpdateURL": "../update/" + table_name,
"sAddURL": "../add/" + table_name,
"sDeleteURL": "../delete/" + table_name,
"sAddDeleteToolbarSelector": "#table1_length",
"aoColumns" : data
/*"aoColumns" : [
{
"cssclass": "required",
"type":"textarea"
},
{
"cssclass": "required",
"type":"textarea",
"submit" : "OK",
"sUpdateURL": "../update/"+table_name,
"loadtype" : "POST"
},
{
"loadurl" : "../data/",
"type" : "select",
"submit": "OK",
"sUpdateURL": "../update/"+table_name,
"loadtype" : "POST"
}
]*/
});
}
});
}
});
因此,如果您看到此代码中注释掉的 aoColumns 与从服务器获得的输出完全相同,但是从服务器获得的输出在 makeditable 函数。这是否意味着数据未达到该参数,因为我在控制台中没有收到任何错误。
解决方案:-
success : function(data){
var data_str= JSON.parse(data);
});
好的。我不得不使用 parse 将 json 字符串转换为 JSobject,然后它终于起作用了。
它不起作用,因为您在这里将 $.ajax(...)
的 return 值分配给 aoColumns
(当您实际上需要将列数组分配给 "aoColumns"):
}).makeEditable({
...
"aoColumns": $.ajax({
相反,您需要做的是首先调用 AJAX。然后,在 jQuery success
函数中设置你的数据表。
$.ajax({
url: '/get_aoColumns',
...
success : function(data) {
// ToDo: put all your datatable code in here.
// and assign `data` to "aoColumns"
/** data table code **/
}).makeEditable({
"aoColumns": data
/** rest of data table code **/
}
除了重要的部分,我已尝试保留所有内容以使关键点清晰,但这应该有助于您了解哪里出了问题。
我在这里设置了一个 JS Fiddle,如果这没有意义的话,还有一个(未经测试的)代码示例:
假设 /get_aoColumns
正确返回所有内容,看起来您想先获取该信息,然后在成功处理程序中创建数据表。在你上面的代码中,看起来 dataTables 声明可以在 ajax 请求有机会完成之前完成,那么这个怎么样:
$(document).ready(function () {
/* Add/remove class to a row when clicked on */
$('#table1 tr').on('click', function () {
$(this).toggleClass('row_selected');
});
var which_table = window.location.pathname;
var which_table_data = which_table.substring(0, which_table.length - 1) + '/data';
var table_name = which_table.substring(14, which_table.length - 1);
//wrap the ajax request to get aoColumns outside of the initializaer
$.get('/get_aoColumns', {q: table_name}, function (aoColumns) {
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"aoColumnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}]
}).makeEditable({
"sUpdateURL": "../update/" + table_name,
"sAddURL": "../add/" + table_name,
"sDeleteURL": "../delete/" + table_name,
"aoColumns": aoColumns //the data retrieved from the request to get_aoColumns
});
});
});