Jquery 有没有办法在datatable editable中从服务器获取aocolumns？
所以，我试图为用户请求的任何表创建一个通用页面。为此，我正在尝试从服务器获取所有数据，而不在客户端进行任何硬编码Jquery 有没有办法在datatable editable中从服务器获取aocolumns？,jquery,ajax,datatables,jquery-datatables-editor,Jquery,Ajax,Datatables,Jquery Datatables Editor,所以，我试图为用户请求的任何表创建一个通用页面。为此，我正在尝试从服务器获取所有数据，而不在客户端进行任何硬编码 $(document).ready(function(){ /* Add/remove class to a row when clicked on */ $('#table1 tr').on('click', function() { $(this).toggleClass('row_selected'); } ); va
$(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，其中_table=window.location.pathname我尝试从成功使用的服务器获取相应表的数据。但是现在我想从服务器上获取aoColumns数组。我的问题是，我是否可以在同一请求中发送数据以及aoData、secho和其他必填字段。我认为这可能无法正确呈现datatable，因为aoColumns不是所需json的一部分。我如何获得任何表的aoColumns，这样即使验证也变成了服务器端，我也不必为每个表设计一个页面
下面这部分不起作用，因为我不知道正确的方法是什么
"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"
}
]*/
});
}
});
}
});
因此，如果您看到此代码中注释掉的AO列与从服务器获得的输出完全相同，但是从服务器获得的AO列不起作用，如果未注释的AO列起作用，则注释掉的AO列起作用。如果使用aoColumns:data，则从服务器获取的数据的行为方式与makeditable函数中根本没有提到aoColumns参数时的行为方式相同。这是否意味着数据没有到达该参数，因为控制台中没有任何错误
解决方案：-
success : function(data){
var data_str= JSON.parse(data);
});
嗯。我不得不使用parse将json字符串转换为JSobject，然后它终于工作了 它不起作用，因为您在此处将$.ajax（…）
的返回值分配给aoColumns
（当您实际需要将列数组分配给“aoColumns”时）：
相反，您需要做的是首先进行AJAX调用。然后，在jQuerysuccess
函数中设置数据表
$.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\u aoColumns
正确返回所有内容，看起来您希望先获取该信息，然后在成功处理程序中创建datatable。在上面的代码中，看起来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
});
});
});
我明白要点了。让我试试。我也在研究同样的问题。好吧，我也添加了一个JS提琴，以防出现混乱。嗨，对不起，我没有跟上主题。我注意到你几个小时前编辑过。这是不是意味着你的代码已经开始工作了？哈，谢谢，是的，我想不是你，我在问“沉默的匿名选民”。这对你有用吗？我猜不是。这种方法行不通。你能看看我最新的问题并提出问题所在吗@辣椒
$(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
});
});
});