【发布时间】：2016-09-19 21:59:08
【问题描述】：
我有以下 Javascript 代码来初始化我网站上的 DataTables 图表。
基本上，我使用此脚本的目的是根据用户当前所在的 URL 在不同的数据中进行 AJAX。我写了一个 if/else 语句，它适用于我页面上的其他组件，但不适用于我的 DataTables 图表。
为什么这不起作用？有没有更好的方法来做到这一点？
var URL = window.location.href;
if (URL.indexOf("london") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-london.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
if (URL.indexOf("nw") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-nw.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
if (URL.indexOf("loupe") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-loupe.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
if (URL.indexOf("new-york") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-new-york.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
if (URL.indexOf("content") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-content.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
else {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
【问题讨论】：
-
您使用的是哪个浏览器和版本？
-
@KarlAnderson Google Chrome 版本 53.0.2785.116。
-
我会添加
debugger;行，直到你找出它失败的地方。这是大海捞针，直到您可以缩小问题所在的行数。 -
不是答案，但您也可以使用
if/else语句中的内容创建函数。然后，如果语句为真，您可以使用相应的数据运行该函数，而不必为每种情况编写所有代码:) -
我认为原始代码中的错误是所有内容都在单独的 if 块内，最后一件事在 if...else 块内。因此，例如，当 url 包含 london 时，代码会进入第一个 if 块，然后也进入最后一个 else 块。一切都应该在 if...else 块中我更喜欢 manuerumx 从代码组织角度提供的解决方案。
标签： javascript jquery ajax datatables