有没有办法在可编辑的datatable中从服务器获取列？
有没有办法在可编辑的datatable中从服务器获取列？
提问于 2015-05-08 13:22:56
因此，我试图为用户所请求的任何表创建一个通用页面。为此，我试图从服务器获取所有数据，而不是在客户端硬编码任何东西。
$(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;的文章中，我尝试从我成功使用的服务器获取相应表的数据。但是现在我想要从服务器获得aoColumns数组。我的问题是，我是否可以在同一请求中发送数据以及aoData、secho和其他必填字段。我认为这可能不能正确地呈现数据表，因为aoColumns不是所需json的一部分。我如何获得任何表的aoColumns，这样即使是验证也成为服务器端，而我不必为每个表设计一个页面。
下面这部分不起作用，因为我不知道正确的方法是什么。
"aoColumns": $.ajax({
dataType: "json",
url: '/get_aoColumns',编辑的 :-
我尝试了@garryp`s的方法..
这是我从服务器获得的data
[{"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与从服务器得到的输出完全相同，但是从服务器得到的输出根本没有在t work and the one commented out if uncommented does work. The one got from the server if used using aoColumns : data just behaves the same way as if aoColumns parameter wasn函数中提到。这是否意味着数据没有达到该参数，因为我在控制台中没有得到任何错误。
解决方案:-
success : function(data){
var data_str= JSON.parse(data);
});好的。我必须使用解析器将json字符串转换为JSobject，然后它终于可以工作了。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-11 06:07:55
它不起作用，因为您在这里将$.ajax(...)的返回值赋值给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：
Stack Overflow用户
发布于 2015-05-11 06:15:15
假设/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
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30116367
复制相关文章
相似问题