2016-09-19 134 views
-1

我有以下Javascript代码来初始化我的网站上的DataTables图表。If/else 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>') 
      }); 
     }); 
     } 
    }); 
    }); 
} 
+0

您使用哪个浏览器和版本? –

+0

@KarlAnderson Google Chrome版本53.0.2785.116。 – Liz

+0

你试过if(URL.toLowerCase()。indexOf(“london”)!== -1){'看看它是否区分大小写问题? –

回答

1

我看不到错误,但也许如果您以这种方式更改代码,应该更容易调试并找到错误。

var URL = window.location.href; 
var ajaxURL = ''; 

if (URL.indexOf("london") !== -1) { 
    ajaxURL = 'aging-projects-london.php'; 
}else if (URL.indexOf("nw") !== -1) { 
    ajaxURL = 'aging-projects-nw.php'; 
}else if (URL.indexOf("loupe") !== -1) { 
    ajaxURL = 'aging-projects-loupe.php'; 
}else if (URL.indexOf("new-york") !== -1) { 
    ajaxURL = 'aging-projects-new-york.php'; 
}else if (URL.indexOf("content") !== -1) { 
    ajaxURL = 'aging-projects-content.php'; 
}else { 
    ajaxURL = 'aging-projects.php'; 
} 
$(document).ready(function() { 
    var table = $('#aging_projects').DataTable({ 
     "processing": true, 
     "serverSide": false, 
     "ajax": "../financial-reports/" + ajaxURL, 
     "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>') 
       }); 
      }); 
     } 
    }); 
}); 
+0

谢谢你的回答@manuerumx。这比我原来的混乱要干净得多,并帮助我追踪这个问题。 – Liz

+0

很高兴我能帮助你@LizBanach – manuerumx