2016-09-19 10 views
-1

私のウェブサイトでDataTablesチャートを初期化する次のJavascriptコードがあります。DataTableでJavascript文が正常に動作しない場合

基本的には、このスクリプトでの私の意図は、ユーザーが現在いる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

関連する問題