我正在使用数据表来显示mySQL数据库中的数据。我想要做的是捕获当前行的值并将其显示在一个模态中进行编辑。
这就是我将数据导入Datatable的方式，
$(document).ready(function() {
$('#loading-span7').fadeOut();
$('#loading-span5').fadeOut();
$('#add-company').hide();
$.fn.dataTableExt.sErrMode = 'throw';
$('#company').dataTable({
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : "/index.php/company/profile_data",
"sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType" : "bootstrap",
"aoColumns" : [{
"mData" : "id"
}, {
"mData" : "name"
}, {
"mData" : "package_id"
}, {
"mData" : function(oObj) {
return "<a href=\"#\" data-id=\"" + oObj.id + "\" data-name=\"" + oObj.name + "\" role=\"button\" class=\"btn edit-company\">Edit</a></td>";
}
}, {
"mData" : function(oObj) {
return "<a href=\"#\" data-id=\"" + oObj.id + "\" data-name=\"" + oObj.name + "\" role=\"button\" class=\"btn view-users\" >Users</a></td>";
}
}]
});
$.extend($.fn.dataTableExt.oStdClasses, {
"sWrapper" : "dataTables_wrapper form-inline"
});
这是模态，
<div id="edit_company" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h3 id="myModalLabel"><span id="company-label"></span>Company</h3>
</div>
<div class="modal-body">
<form id="company-form">
<fieldset>
<label>Name</label>
<input type="text" placeholder="Type something…" name="company-name">
<label>Package</label>
<select name="package" name="package-id" id="package-id">
</select>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Close
</button>
<button class="btn btn-primary">
Save changes
</button>
</div>
</div>
这是我试图实现目标的脚本，但问题只是数据表的第一行被捕获到模态中
$('#company .edit-company').live('click', function() {
var id = $(this).attr('id');
$('#company-label').html('Edit ');
$('#company-form')[0].reset();
$.ajax({
url : '/index.php/company/profile_data',
type : 'POST',
data : 'companies[]=' + id,
beforeSend : function() {
$('#loading-span7').show();
},
success : function(data, textStatus, xhr) {
var details = JSON.parse(data);
console.log(details);
//console.log(details.aaData[0].homepage_url);
$('input[name=company-name]').val(details.aaData[0].name);
//$('input[name=package-id]').html(details.aaData[0].package_id);
/**oTable.$('.edit-company').click(function() {
var data1 = oTable.fnRowSelected(this);
$('input[name=company-name]').val(details.aaData[0].name);
});**/
var option1 = $('<option />', {
text : details.aaData[0].package_id
}), option2 = $('<option />', {
text : details.aaData[1].package_id
});
$('select#package-id').append(option1, option2);
//$('select#package-id option').text(details.aaData[0].package_id);
//$('#package-id').val(details.aaData[0].package_id);
$('#edit_company').modal('show');
$('#loading-span7').fadeOut();
},
error : function(xhr, textStatus, errorThrown) {
//alert('error');
}
});
});
我可以做些什么来实现我的目标？
答案 0 :(得分：1)
尝试使用fnGetData方法。
假设您的表已设置为oTable
var oTable = $('#company').dataTable({
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : "/index.php/company/profile_data",
"sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType" : "bootstrap",
"aoColumns" : [{
"mData" : "id"
}, {
"mData" : "name"
}, {
"mData" : "package_id"
}, {
"mData" : function(oObj) {
return "<a href=\"#\" data-id=\"" + oObj.id + "\" data-name=\"" + oObj.name + "\" role=\"button\" class=\"btn edit-company\">Edit</a></td>";
}
}, {
"mData" : function(oObj) {
return "<a href=\"#\" data-id=\"" + oObj.id + "\" data-name=\"" + oObj.name + "\" role=\"button\" class=\"btn view-users\" >Users</a></td>";
}
}]
});
var selected_data='';
$("td").live("click", function(){
selected_data = oTable.fnGetData(this);
});
答案 1 :(得分：1)
由于您使用的是bServerSide，因此只需使用fnRowCallback并稍微改变列格式。
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var row = $(nRow),
a = $('<a />').addClass('btn').attr({
'href': '#',
"role": "button"
}).data('rowData', { //store the data in the button
"id": aData[0],
"name": aData[1],
"package_id": aData[2]
});
// or store the raw data in the tr element
//row.data('rowData', aData);
// or store a formtted object containing the raw data in the tr element
//row.data('rowData', );
// Add the Edit button when the datatable draws the row.
row.find('td:eq(3)').append(a.clone().addClass('edit-company').text('Edit').click(function (e) {
var self = $(this),
rowData = self.data('rowData'),
id = rowData.id,
name = rowData.name,
package_id = rowData.package_id;
//code to init your dialog
e.preventDefault();
return false;
}));
// Add the Users button when the datatable draws the row.
row.find('td:eq(4)').append(a.clone().addClass('view-users').text('Users').click(function (e) {
var self = $(this),
rowData = self.data('rowData'),
id = rowData.id,
name = rowData.name,
package_id = rowData.package_id;
//code to handle your users
e.preventDefault();
return false;
}));
},
"aoColumns" : [{
"mData" : "id"
}, {
"mData" : "name"
}, {
"mData" : "package_id"
}, {
"mData" : "Edit"
}
}, {
"mData" : "Users"
}]
答案 2 :(得分：0)
我这样做的方法是我有一个创建模态的函数，我已经简化了一点。
function fnModalDetails ( nTr ) {
var aData = oTable.fnGetData( nTr );
var sOut = '<div id="myModal2" class="reveal-modal large">;
sOut += aData[1];
sOut += '</div>';
return sOut;
}
您需要以某种方式将单击处理程序附加到您的单元格。下面我正在使用Zurb Reveal模式。您需要删除以前可能创建的任何模态。
$('.more').live('click', function() {
event.preventDefault();
var nTr = $(this).parents('tr')[0];
$('#myModal2').remove();
$('body').append(fnModalDetails(nTr));
$("#myModal2").reveal({animation: 'fade'});
});
希望这有帮助。