Booststrap数据表不能在Web托管上工作

时间:2016-06-01 04:33:34

标签: php twitter-bootstrap-3 datatable

我在我的localhost上使用数据引导程序(到目前为止工作正常)但是当我上传到web主机提供程序时,数据表无效。

你知道我的问题有什么问题吗?我试图改变包含jquery和javascript的位置,但它仍然无效。

编辑: 这是我头脑中的代码

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>BDR Scosys 3.1</title>
<link rel="icon" type="image/png" href="../icon.png"/>

<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!--
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
-->
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600' rel='stylesheet' type='text/css'> -->


<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

<!-- Bootstrap Toggle Switch-->
<link href="../bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">

<!-- Timeline CSS -->
<link href="../dist/css/timeline.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<link href="../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- Step -->
<link href="../dist/css/steps.css" rel="stylesheet">

<!-- Reset Password -->
<link href="../dist/css/reset_password.css" rel="stylesheet">

<script src="../dist/js/jquery-1.7.min.js"></script>
<script src="../dist/js/pass-js.js"></script>

<!-- Morris Charts CSS -->
<link href="../bower_components/morrisjs/morris.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- HighChart -->
<script src="../bower_components/highchart/jquery.min.js" type="text/javascript"></script>
<script src="../bower_components/highchart/highcharts.js" type="text/javascript"></script>
<?php
if ($_GET['mod']=='dashboard' OR $_GET['mod']=='st_all_branch' OR $_GET['mod']=='stat_ao'){
    include "../config/grafik/all_branch.php";
    // include "../config/grafik/all_branch_tp.php";
}
elseif ($_GET['mod']=='st_all_scorer'){
    include "../config/grafik/all_scorer.php";
}
?>

<?php
if ($_GET['mod']=='credit_scoring' OR $_GET['mod']=='pengguna' OR $_GET['mod']=='rec_app' OR $_GET['mod']=='ak' OR $_GET['mod']=='spfk' OR $_GET['mod']=='mp' OR $_GET['mod']=='tater' OR $_GET['mod']=='pk' OR $_GET['mod']=='skpg' OR $_GET['mod']=='promess' OR $_GET['act']=='history' OR $_GET['act']=='broadcast'){ ?>
<!-- DataTables CSS -->
<link href="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">

<!-- DataTables Responsive CSS -->
<link href="../bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">


<?php } ?>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php include "../config/limitWord.php"; ?>

<script language="javascript" src="../bower_components/calendar/calendar.js"></script>

这是我的页脚代码

<script src="../bower_components/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>

<script src="../bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<?php
if ($_GET['mod']=='st_gro_scorer'){
    include "../config/grafik/growth_branch.php";
}
elseif ($_GET['mod']=='stat_ao'){
    include "../config/grafik/growth_scorer_ao.php"; ?>
<?php } ?>
<!--
<script src="../js/morris-data.js"></script>
-->

<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script src="../dist/js/enscroll-0.6.2.min.js"></script>

<!-- Bootstrap Toggle Switch -->
<script src="../bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

<?php
if ($_GET['mod']=='credit_scoring' OR $_GET['mod']=='pengguna' OR $_GET['mod']=='rec_app' OR $_GET['mod']=='ak' OR $_GET['mod']=='spfk' OR $_GET['mod']=='mp' OR $_GET['mod']=='tater' OR $_GET['mod']=='pk' OR $_GET['mod']=='skpg' OR $_GET['mod']=='promess' OR $_GET['act']=='history' OR $_GET['act']=='broadcast'){ ?>
<!-- DataTables JavaScript -->
<script src="../bower_components/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    $('#dataTables-example').DataTable({
            responsive: true
    });
});
</script>
<?php } ?>
<script>
    function formatCurrency(num) {
    num = num.toString().replace(/\$|\,/g,'');
    if(isNaN(num))
    num = "0";
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num*100+0.50000000001);
    cents = num%100;
    num = Math.floor(num/100).toString();
    if(cents<10)
    cents = "0" + cents;
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
    num = num.substring(0,num.length-(4*i+3))+'.'+
    num.substring(num.length-(4*i+3));
    return (((sign)?'':'-') + 'Rp ' + num + ',' + cents);
    }
</script>
<!-- Row Button -->
<script>
    $(document).ready(function(){
    $('tbody #tr-link').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});
</script>

<script type="text/javascript">
$(document).ready(function () {
    window.setTimeout(function() {
        $(".auto-hide").fadeTo(100, 0).slideUp(500, function(){
            $(this).remove();
        });
    }, 5000);
});
</script>

这是我的表脚本

  <div class="row" id="scrollbox3">
    <div class="col-lg-12">
    <h3></h3>
        <ol class="breadcrumb">
            <li class="active">Credit Scoring</li>
        </ol>

    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<?php
include "../config/functions/notifications.php";
?>
<?php
$tgl_dibuat = date('Y-m-d');

if ($_SESSION['id_jabatan']=='AOF' OR $_SESSION['id_jabatan']=='SOF' OR $_SESSION['id_jabatan']=='BSU'){
    $tampil=mysql_query("SELECT * FROM credit_scoring,pengguna WHERE credit_scoring.kode_karyawan=pengguna.kode_karyawan AND credit_scoring.kode_karyawan='$_SESSION[kode_karyawan]' ORDER BY credit_scoring.tgl_dibuat DESC");
    $row = mysql_num_rows($tampil);
}
elseif ($_SESSION['id_jabatan']=='PCA' OR $_SESSION['id_jabatan']=='TLE'){
    $tampil=mysql_query("SELECT * FROM credit_scoring,pengguna WHERE credit_scoring.kode_karyawan = pengguna.kode_karyawan AND credit_scoring.kode_cabang='$_SESSION[kode_cabang]' ORDER BY credit_scoring.tgl_dibuat DESC");
    $row = mysql_num_rows($tampil);
}
else{
    $tampil=mysql_query("SELECT * FROM credit_scoring, pengguna WHERE credit_scoring.kode_karyawan = pengguna.kode_karyawan ORDER BY credit_scoring.tgl_dibuat DESC");
    $row = mysql_num_rows($tampil);
} ?>
    <div class="row datatables-content">
        <div class="col-lg-12">
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-hover" id="dataTables-example">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Nama Debitur</th>
                                    <th class="hidden-xs hidden-sm">Fasilitas Kredit</th>
                                    <th class="hidden-xs hidden-sm">Pembuat</th>
                                    <th>Status</th>
                                    <th class="hidden-xs hidden-sm">Tgl App</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php while ($r=mysql_fetch_array($tampil)){ ?>
                                <tr>
                                    <td>
                                        <ul class="nav nav-pills nav-stacked">
                                            <li class="dropdown"><button type="button" class="btn btn-primary btn-xs" data-toggle="dropdown"><i class="fa fa-list"></i></button>
                                                <?php include 'credit_scoring/option_menu.php';?>
                                            </li>
                                        </ul>
                                    </td>
                                    <td><?php echo ucwords($r['nama_debitur']);?></td>
                                    <td class="hidden-xs hidden-sm"><?php echo" $r[fasilitas_kredit] ";?></td>
                                    <td class="hidden-xs hidden-sm"><?php echo" $r[nama_pengguna] ";?></td>
                                    <td><?php if ($r['status']=='Level 1'){
                                            echo "Tertunda";
                                            }
                                            elseif ($r['status']=='Level 2'){
                                                echo"Scored";
                                            }
                                            elseif ($r['status']=='Level 3'){
                                                echo"Data Kredit";
                                            }
                                            elseif ($r['status']>0){
                                                $qPangkat = mysql_query("SELECT * FROM pengguna,jabatan WHERE pengguna.id_jabatan=jabatan.id_jabatan AND id_pangkat_komite='$r[status]'");
                                                $pk = mysql_fetch_array($qPangkat);
                                                echo $pk['nm_jabatan'];
                                            }
                                            else{
                                                echo $r['status'];
                                            }

                                            ?>
                                    </td>
                                    <td class="hidden-xs hidden-sm"><?php   if ($r['tgl_final_approve']>0){ echo date('d-m-Y',strtotime($r['tgl_final_approve'])); }
                                                else { echo "-"; }
                                    ?></td>
                                </tr>
                                <?php } ?>
                            </tbody>
                        </table>
        </div>
    </div>

这是托管之前/之后的样子。

after hosted - before hosted

2 个答案:

答案 0 :(得分:1)

现在正在运作。 我刚试过包括jquery和datatables CDN。问题是我没有引用jquery,而且数据库库的路径是错误的。

使用下面的脚本添加jquery和datatables

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

答案 1 :(得分:0)

在加载jQuery之前,一些依赖于jQuery的脚本被包含在内。

我建议搬家

<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>