我创建了c＃web方法来从数据库中检索数据，并使用ajax请求调用此Web方法以在数据表中显示它。
js code：
var TableEditable = function () {
var handleTable = function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[5].innerHTML = '<a class="cancel" href="">Cancel</a>';
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 5, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnDraw();
}
var table = $('#sample_editable_1');
var oTable = table.dataTable({
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// set the initial value
"pageLength": 10,
"language": {
"lengthMenu": " _MENU_ records"
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"ajax": {
"iDisplayLength": 100,
"iDisplayStart": 0,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/WS/WS.asmx/GetCustomers",
"sServerMethod": "GET",
"sAjaxDataProp": "",
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
},
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $("#sample_editable_1_wrapper");
tableWrapper.find(".dataTables_length select").select2({
showSearchInput: true //hide search box with special css class
}); // initialize select2 dropdown
var nEditing = null;
var nNew = false;
$('#sample_editable_1_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("Previose row not saved. Do you want to save it ?")) {
saveRow(oTable, nEditing); // save
$(nEditing).find("td:first").html("Untitled");
nEditing = null;
nNew = false;
} else {
oTable.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}
var aiNew = oTable.fnAddData(['', '', '', '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
table.on('click', '.delete', function (e) {
e.preventDefault();
if (confirm("Are you sure to delete this row ?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
table.on('click', '.edit', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
return {
//main function to initiate the module
init: function () {
handleTable();
}
};
}();
C＃web方法：
[WebMethod(EnableSession = true)]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public void GetCustomers()
{
DataTable dt = ICMS_DB_CLS.GetDataFromDB("Select * from t_crm_customers");
List<Customers> lis = new List<Customers>();
lis = ExtensionList.ToListof<Customers>(dt);
var d= new { sEcho = 1,
iTotalRecords =20,
iTotalDisplayRecords = 20,
aaData = lis };
string json = JsonConvert.SerializeObject(d, Formatting.Indented);
System.Web.HttpContext.Current.Response.ContentType = "text/plain";
System.Web.HttpContext.Current.Response.ContentEncoding = Encoding.UTF8;
System.Web.HttpContext.Current.Response.Cache.SetNoStore();
System.Web.HttpContext.Current.Response.Expires = -1;
System.Web.HttpContext.Current.Response.Write(json);
}
我的错误：
无效的JSON响应jquery数据表
我的json回答是：
{"data": [
{
"CustomerId": 2,
"CustomerType": "type ",
"CustomerCode": "123",
"CustomerName": "salah sayed",
"CustomerAddress": "Mohammed kamel hussien",
"CustomerEmail": "salah.rzzaz90@gmail.com",
"CustomerTel1": "0226248850",
"CustomerTel2": "0226248851",
"CustomerMobile": "01067395199",
"CustFirstBal": 1.00,
"LimitMony": 20.00,
"FlagAccType": "a",
"CustomerDisc": 3.00
}
]}
答案 0 :(得分：0)
正确的ajax选项应为：
// ... skipped ...
"ajax": {
url: "/WS/WS.asmx/GetCustomers",
type: 'GET',
dataType: "json",
contentType: "application/json; charset=utf-8"
},
// ... skipped ...
答案 1 :(得分：0)
您的JSON对象必须像这样
{
sEcho = <integer sent to server>,
iTotalRecords = <All Records Count>,
iTotalDisplayRecords = <All Records Count>,
aaData = <you list of data>,
}
版本1.11
答案 2 :(得分：0)
我有同样的问题，因为我没有声明ajax方法调用类型。
在ajax调用中查看我的代码，也许它可以帮到你。
$('#ajax-table').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "../admin/AjaxListarEmpresas",
"type": "POST"
},
"columns": [