C# datatables插件中的AJAX请求在我的代码的每个部分都不起作用
我正在一个项目中使用ASP.NETMVC5、jquery和datatables插件。我的目标是使用datatables的服务器端函数来检索数据库的数据,然后在datatable中显示dat。这在我的代码中的一部分工作得很好。在这里,您可以看到我使用datatables插件的jquery代码:C# datatables插件中的AJAX请求在我的代码的每个部分都不起作用,c#,jquery,ajax,url,datatable,C#,Jquery,Ajax,Url,Datatable,我正在一个项目中使用ASP.NETMVC5、jquery和datatables插件。我的目标是使用datatables的服务器端函数来检索数据库的数据,然后在datatable中显示dat。这在我的代码中的一部分工作得很好。在这里,您可以看到我使用datatables插件的jquery代码: var problemTable = $('#ProblemTable').DataTable({ processing: true, // show message while querying
var problemTable = $('#ProblemTable').DataTable({
processing: true, // show message while querying fro data
serverSide: true,
ajax: {
url: "/OverView/LoadProblems"
}
});
如下图所示,请求成功,我的数据表在网站中得到了应有的填充
请求URL如下所示:
$('.DeleteEntity').click(
function () {
try
{
var deleteTable = $('#DeleteTable').DataTable({
processing: true,
serverside: true,
destroy: true,
ajax: {
url: "/Administration/ShowEntriesDelete"
}
});
}
catch (e)
{
console.log(e);
}
});
到目前为止一切都很好。但现在是那个让我发疯的角色。在另一个jquery脚本中,我尝试为新的datatable再次调用datatables方法。代码如下所示:
$('.DeleteEntity').click(
function () {
try
{
var deleteTable = $('#DeleteTable').DataTable({
processing: true,
serverside: true,
destroy: true,
ajax: {
url: "/Administration/ShowEntriesDelete"
}
});
}
catch (e)
{
console.log(e);
}
});
这个Ajax调用不再起作用了。如下图所示,C代码中的操作方法失败
在本例中,请求URL如下所示
所以我的问题是:尽管我在jquery代码中使用了相同的函数,但为什么我会得到这种行为?还是有什么我完全错了
我想我已经尝试了所有的方法,但是我还是不明白。这两个数据表在HTML中看起来完全相同,只是id和列标题不同
我也找了类似的问题,但什么也找不到。如果有人能给我一个提示,我将非常高兴
致以最良好的祝愿
编辑:
@卡尔文·阿南达
我修改了您的答案,并将两个DataTable函数添加到一个脚本中,仅用于测试目的。这是洞的脚本
var troubleshootingIDs = [];
$(document).ready(
function () {
// if I call this method, everything works just fine, the c# code throws an error (which it should) but the ajax method is successfull
var problemTable = $('#ProblemTable').DataTable({
processing: true, // show message while querying fro data
serverSide: true,
"ajax": "/Administration/ShowEntriesDelete"
});
// if I call this method, the ajax method doesnt get called, because there is absolute no data provided in the url
var deleteTable = $('#DeleteTable').DataTable({
processing: true,
serverside: true,
destroy: true,
"ajax": "/Administration/ShowEntriesDelete",
"columns": [
{ "data": "Description" },
{ "data": "Connection" },
{ "data": "Action" }
]
});
var table = $('#reasonTable').DataTable({
pageLength: 2,
lengthChange: false,
columnDefs: [
{
targets: [3],
className: "hide_me"
}
]
}
);
var agentButton = $('.agentButton');
$('td').on('click', '#BadgeContainer', function () {
var IDs = [];
$('#DocList').empty();
$('.DocLinkID').each(function (counter) {
IDs[counter] = $(this).html();
});
console.log(IDs);
$.ajax({
url: "/OverView/GetDocuments",
traditional: true,
data: { IDs: IDs },
content: 'application/json; charset=utf-8',
success: listDocuments
});
});
$('#reasonTable tbody').on('click', 'tr', function () {
$('#SolutionList').empty();
troubleshootingIDs = [];
if ($(this).hasClass('selected')) {
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
var selectedReason = $('.ReasonGuid', this).text();
$.ajax({
url: '/OverView/ReasonJson',
contentType: 'application/json; charset=utf-8',
data: { 'selectedReason': selectedReason },
success: handleJsonForWizard
}
);
}
);
$('.SolutionButton').on('click',
function () {
var indexToRemove = [];
var dummyArray = [];
for (var counter = 0; counter < troubleshootingIDs.length; counter++) {
if ($('#q' + (+counter * 2)).hasClass('btn-active')) {
indexToRemove.push(counter);
}
dummyArray[counter] = troubleshootingIDs[counter];
}
for (var counter = indexToRemove.length - 1; counter >= 0; counter--) {
dummyArray.splice(indexToRemove[counter], 1);
}
$.ajax(
{
url: '/OverView/GetSolutions',
contentType: 'application/json; charset=utf-8',
traditional: true,
data: { troubleshootingIDs: dummyArray },
success: function (json) {
$('#SolutionList').empty();
try {
for (var counter = 0; counter < Object.keys(json).length; counter++) {
$('#SolutionList').append('<li class="list-group-item">' + json[counter] + '</li>');
}
}
catch (err) {
}
}
}
);
}
);
$('#ProblemTable tbody').on('click', '.WizardButton',
function () {
var IdToGet = $(this).attr('id');
var url = '/OverView/Wizard?SelectedID=';
window.location.replace(url + IdToGet);
}
);
// Carousel fuction overriding (doesn't work wiht jquery template)
$('.carousel-control.left').click(
function () {
var parentId = '#' + $(this).parent().attr('id');
$(parentId).carousel('prev');
}
);
$('.carousel-control.right').click(
function () {
var parentId = '#' + $(this).parent().attr('id');
$(parentId).carousel('next');
}
);
// comment to define
$('.row #BackToTable').click(
function () {
window.location.replace("/OverView");
}
);
$('body').on('click', '.AgentButton',
function () {
var idNum = $(this).attr('id');
var num = idNum.substring(1);
$('#' + idNum).toggleClass('btn-active');
if ((num % 2) == 0) {
var numToCompare = +num + 1;
var classToCompare = $('#q' + numToCompare).attr('class');
if (classToCompare == 'btn AgentButton btn-active') {
$('#q' + numToCompare).toggleClass('btn-active');
}
}
else {
var numToCompare = +num - 1;
var classToCompare = $('#q' + numToCompare).attr('class');
if (classToCompare == 'btn AgentButton btn-active') {
$('#q' + numToCompare).toggleClass('btn-active');
}
}
}
);
function handleJsonForWizard(json) {
initializeCarousel(json.ImgLinks);
initializeAgent(json.Troubleshootings, json.TroubleshootingIDs);
}
function initializeCarousel(imgLinks) {
$('#ReasonVisualisation > ol').empty();
$('#ReasonVisualisation > .carousel-inner').empty();
for (var counter = 0; counter < Object.keys(imgLinks).length; counter++) {
$('#ReasonVisualisation > ol').append('<li data-target="#ReasonVisualisation" data-slide-to="' + counter + '"></li>');
$('#ReasonVisualisation > .carousel-inner').append('<div class="item"><img src="' + imgLinks[counter] + '"/> </div>');
}
$('#ReasonVisualisation > ol >li:first').addClass('active');
$('#ReasonVisualisation > .carousel-inner>div:first').addClass('active');
var list = $('#ReasonVisualisation > ol').html();
var inner = $('#ReasonVisualisation > .carousel-inner').html();
}
function initializeAgent(troubleshootings, ids) {
$('#Agent').empty();
for (var counter = 0; counter < Object.keys(troubleshootings).length; counter++) {
$('#Agent').append('<div>' + troubleshootings[counter] + ' </div>');
$('#Agent').append('<div class="btn AgentButton" id="q' + (counter * 2) + '">Yes</div>');
$('#Agent').append('<div class="btn AgentButton" id="q' + ((counter * 2) + 1) + '">No</div>');
agentButton = $('.AgentButton');
troubleshootingIDs[counter] = ids[counter];
}
}
function listDocuments(json) {
//Array.isArray(json);
if (json.length > 1) {
for (var counter = 0; counter < json.length; counter++) {
$('#DocList').append('<li> <a href=\"' + json[counter] + '\" > Link </a></li>');
}
}
}
}
var故障诊断ID=[];
$(文件)。准备好了吗(
函数(){
//如果我调用这个方法,一切正常,c代码会抛出一个错误(应该是这样),但是ajax方法成功了
var problemTable=$(“#problemTable”).DataTable({
处理:true,//查询fro数据时显示消息
服务器端:是的,
“ajax”:“/Administration/ShowEntriesDelete”
});
//如果调用此方法,则不会调用ajax方法,因为url中绝对没有提供任何数据
var deleteTable=$('#deleteTable')。数据表({
处理:对,
服务器端:是的,
摧毁:没错,
“ajax”:“/Administration/ShowEntriesDelete”,
“栏目”:[
{“数据”:“描述”},
{“数据”:“连接”},
{“数据”:“操作”}
]
});
变量表=$(“#推理表”).DataTable({
页长:2,
长度变化:错误,
columnDefs:[
{
目标:[3],
类名:“隐藏我”
}
]
}
);
var agentButton=$('.agentButton');
$('td')。在('click','#BadgeContainer',函数()上{
var-id=[];
$('#DocList').empty();
$('.DocLinkID')。每个(函数(计数器){
IDs[counter]=$(this.html();
});
控制台日志(IDs);
$.ajax({
url:“/OverView/GetDocuments”,
传统的:是的,
数据:{IDs:IDs},
内容:“application/json;charset=utf-8”,
成功:listDocuments
});
});
$(#reasonable tbody')。在('click','tr',函数(){
$(“#解决方案列表”).empty();
疑难解答IDS=[];
if($(this).hasClass('selected')){
}
否则{
表.$('tr.selected')。removeClass('selected');
$(this.addClass('selected');
}
var selectedReason=$('.ReasonGuid',this.text();
$.ajax({
url:“/OverView/ReasonJson”,
contentType:'application/json;charset=utf-8',
数据:{'selectedReason':selectedReason},
成功:handleJsonForWizard
}
);
}
);
$('.SolutionButton')。在('单击'),
函数(){
var indexToRemove=[];
var dummyArray=[];
用于(变量计数器=0;计数器<疑难解答ID.length;计数器++){
if($('#q'+(+计数器*2)).hasClass('btn-active')){
指数移动。推(计数器);
}
dummyArray[计数器]=疑难解答ID[计数器];
}
对于(var counter=indexToRemove.length-1;计数器>=0;计数器--){
dummyArray.splice(indexToRemove[计数器],1);
}
$.ajax(
{
url:“/OverView/GetSolutions”,
contentType:'application/json;charset=utf-8',
传统的:是的,
数据:{troubleshootingIDs:dummyArray},
成功:函数(json){
$(“#解决方案列表”).empty();
试一试{
for(var counter=0;counter”+json[counter]+””);
}
}
捕捉(错误){
}
}
}
);
}
);
$(#ProblemTable tbody')。在('click','WizardButton',上,
函数(){
var IdToGet=$(this.attr('id');
var url='/OverView/Wizard?SelectedID=';
window.location.replace(url+IdToGet);
}
);
//转盘功能重写(不适用于jquery模板)
$('.carousel control.left')。单击(
函数(){
var parentId='#'+$(this.parent().attr('id');
$(parentId).carousel('prev');
}
);
$('.carousel control.right')。单击(
函数(){
var parentId='#'+$(this.parent().attr('id');
$(parentId).carousel('next');
}
);
//要定义的注释
$('
$(".DeleteEntity").click(
function () {
try
{
var deleteTable = $("#DeleteTable").DataTable({
processing: true,
serverside: true,
destroy: true,
"ajax": "/Administration/ShowEntriesDelete"
});
}
catch (e)
{
console.log(e);
}
});