code#1

<link rel="stylesheet" href="assets/plugins/datatables/dataTables.bootstrap.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="assets/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="assets/bootstrap/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="assets/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="assets/dist/css/skins/_all-skins.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="assets/plugins/iCheck/flat/blue.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="assets/plugins/morris/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="assets/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="assets/plugins/datepicker/datepicker3.css">
  <link rel="stylesheet" href="assets/plugins/colorpicker/bootstrap-colorpicker.min.css">
  <!-- Bootstrap time Picker -->
  <link rel="stylesheet" href="assets/plugins/timepicker/bootstrap-timepicker.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="assets/plugins/daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
  <link rel="stylesheet" href="assets/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <!-- DataTables -->
  <link rel="stylesheet" href="assets/plugins/datatables/dataTables.bootstrap.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="assets/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="assets/dist/css/skins/_all-skins.min.css">
<section class="content-header">
  <h1>
    Daftar Anggota
    <small>Jemaat</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="?p=dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="#">Data</a></li>
    <li class="active">Data Jemaat</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <!-- /.box-header -->
        <div class="box-body table-responsive">
          <?php if(@$_SESSION['admin'] || @$_SESSION['pengurus']){ ?>
          <div class="col-lg-12">
              <a href="?p=anggota&act=tambah">
                <button class="btn btn-success">
                  <i class="fa  fa-plus-square"></i> Tambah Jemaat
                </button>
              </a>
          </div>
          <?php } ?>
          <table id="table_id" class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
              <th>No</th>
              <th>Nama</th>
              <th>Alamat</th>
              <th>Kelompok</th>
            </tr>
            </thead>
            <tbody>

            <?php
              $jml_data = mysql_num_rows(mysql_query("SELECT * FROM tbl_anggota"));
              $batas = 15;
              $pg = isset( $_GET['pg'] ) ? $_GET['pg'] : "";

              if ( empty( $pg ) ) {
                $posisi = 0;
                $pg = 1;
              } else {
               $posisi = ( $pg - 1 ) * $batas;
              }
              $query = mysql_query("SELECT * FROM tbl_anggota limit $posisi, $batas");
              $q_cek = mysql_num_rows($query);

              if($q_cek == 0){
                echo "<tr><td colspan='5' align='center'>Data Kosong</td></tr>";
              } else{
                $no = 1+$posisi;
                while ($data = mysql_fetch_array($query)) {
                  echo "<tr>";
                  echo "<td>".$no."</td>";
                  echo "<td><a href='?p=anggota&act=detail&id_anggota=".$data['id_anggota']."'>".$data['nama_anggota']."</a></td>";
                  echo "<td>";
                    if(strlen($data['alamat']) >= 25){
                      echo substr_replace($data['alamat'], "...", 25);
                    } else {
                      echo $data['alamat'];
                    }
                  echo "</td>";
                  echo "<td>".$data['kel_jemaat']."</td>";
                  ?>
                  <?php if(@$_SESSION['admin'] || @$_SESSION['pengurus']){ ?>
                  <td>
                    <a onclick="return confirm('Yakin Ingin Mengedit Data <?php echo $data['nama_anggota']; ?>?')" href="?p=anggota&act=edit&id_anggota=<?php echo $data['id_anggota']; ?>" >
                      <span class='btn btn-primary btn-xs'><i class='fa fa-edit'></i> Edit</span>
                    </a>
                    <a onclick="return confirm('Yakin Ingin Menghapus Data <?php echo $data['nama_anggota']; ?>?')" href="?p=anggota&act=hapus&id_anggota=<?php echo $data['id_anggota']; ?>">
                      <span class='btn btn-danger btn-xs'><i class='fa fa-trash'></i> Hapus</span>
                    </a>
                  <td>
                  <?php } ?>
                  <?php
                  echo "<tr>";

                  $no++;
                }
              }
            ?>
            </tbody>
          </table>
          <div class="col-sm-5">
            <div class="dataTables_info" id="example2_info" role="status" aria-live="polite">
              <?php echo "Jumlah Data : ". $jml_data; ?>
            </div>
          </div>
          <div class="col-sm-7">
            <div class="dataTables_paginate paging_simple_numbers" id="example2_paginate">
              <?php

                  $JmlHalaman = ceil($jml_data/$batas);
                  if ( $pg > 1 ) {
                    $link = $pg-1;
                    $prev = 1;
                  } else {
                    $prev = "";
                  }

                  $nmr = '';


                  if ( $pg < $JmlHalaman ) {
                    $link = $pg + 1;
                    $next = 1;
                  } else {
                    $next = "";
                  }

              ?>
              <ul class="pagination">
                <?php
                  if($prev == 1){
                    echo '<li class="paginate_button previous" id="example2_previous">';
                    echo "<a href='?p=anggota&pg=$link' aria-controls='example2' data-dt-idx='0' tabindex='0'>Sebelumnya </a></li>";
                  } else if($prev == ""){
                    echo '<li class="paginate_button previous disabled" id="example2_previous">';
                    echo "<a href='#' aria-controls='example2' data-dt-idx='0' tabindex='0'>Sebelumnya </a></li>";
                  }
                  for ( $i = 1; $i<= $JmlHalaman; $i++ ){

                    if ( $i == $pg ) {
                      echo '<li class="paginate_button active">';
                      echo "<a href='#' >$i</a></li>";
                    } else {
                      echo '<li class="paginate_button">';
                      echo "<a href='?p=anggota&pg=$i' aria-controls='example2' data-dt-idx='0' tabindex='0'>$i</a></li>";
                    }
                  }
                  if($next == 1){
                    echo '<li class="paginate_button next" id="example2_previous">';
                    echo "<a href='?p=anggota&pg=$link' aria-controls='example2' data-dt-idx='0' tabindex='0'>Selanjutnya </a></li>";
                  } else if($next == ""){
                    echo '<li class="paginate_button next disabled" id="example2_previous">';
                    echo "<a href='#' aria-controls='example2' data-dt-idx='0' tabindex='0'>Selanjutnya </a></li>";
                  }
                ?>
              </ul>
            </div>
          </div>
        </div>
        <!-- /.box-body -->
      </div>
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>

<link rel="stylesheet" type="text/css" href="DataTables/datatables.css">

<script type="text/javascript" charset="utf8" src="DataTables/datatables.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/DataTables-1.10.13/js/jquery.dataTables.js"></script>
<script>
$(document).ready( function () {
    $('#table_id').DataTable();
} );
</script>