If/else Javascript語句與DataTables無法正常工作

-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>') 
      }); 
     }); 
     } 
    }); 
    }); 
}

來源

2016-09-19 Liz

您使用哪個瀏覽器和版本？ –

@KarlAnderson Google Chrome版本53.0.2785.116。 – Liz

你試過if（URL.toLowerCase（）。indexOf（「london」）！== -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>') 
       }); 
      }); 
     } 
    }); 
});

來源

2016-09-19 22:29:38 manuerumx

謝謝你的回答@manuerumx。這比我原來的混亂要乾淨得多，並幫助我追蹤這個問題。 – Liz

很高興我能幫助你@LizBanach – manuerumx

If/else Javascript語句與DataTables無法正常工作

回答

相關問題