[Ask] Tabel dengan Pagination dan Live Search

Discussion in 'Desain Web dan Programming' started by xpreborn, 20 Oct 2015.

Thread Status:
Not open for further replies.
  1. xpreborn

    xpreborn Poster 2.0

    Messages:
    183
    Likes Received:
    4
    Trophy Points:
    18
    Selamat sore Om,
    Izin tanya lagi,
    Masih ada hubungan dgn yg ini kemarin : http://www.diskusiwebhosting.com/threads/ask-on-duplicate-key-update.17635/
    Yang mana nanti hasil recordnya itu saya tampilkan dalam bentuk table,
    Nah untuk tampilannya dalam bentuk table sudah bisa, hanya saja saya berfikir jika misalnya nanti agak bertambah dan lumayan banyak maka akan dibutuhkan yg namanya pagnation dan search
    Saya coba2 search infonya saya suka yang ini : http://www.datatables.net/examples/data_sources/server_side.html
    Kira2 untuk membuat live search dan pagination seperti itu bagaimana yach Om atau adakah referensinya?
    Karena yg contoh dilink itu agak kurang paham saya menyatukannya
     
  2. xpreborn

    xpreborn Poster 2.0

    Messages:
    183
    Likes Received:
    4
    Trophy Points:
    18
    Saya coba2 referensi seperti di bawah ini untuk tablenya search dan paginationnya berfungsi dgn baik tp yg dinamik datanya ga nampil jika yg static nampil, kira2 apa yg kurangnya yach Om ?

    Code:
    <html>
    <head>
      <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    </head>
    <body>
      <table id="example">
        <thead>
            <tr><th>No</th><th>IP Address</th><th>AP Name</th><th>Group Name</th><th>Location</th><th>Comment</th><th>Static Coba</th></tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
      <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
      <script>
    
      $(function(){
    $("#example").dataTable({
      "aaData":[
    <?php
    include("koneksi.php");
    
            $query = "select * from daftarip order by groupname, apname";
            $result = mysqli_query($mysqlId, $query);
    
            $no = 0;
            while( list($id, $ipaddress, $apname, $group, $location, $comment) = mysqli_fetch_row($result) ) {
            $no++;
            }
            echo "['$no','$ipaddress','$apname','$group','$location','$comment','Coba StaticData1']";
    mysqli_free_result($result);
    ?>
      ],
      "aoColumnDefs":[{
            "sTitle":"Site name"
          , "aTargets": [ "site_name" ]
      },{
            "aTargets": [ 1 ]
          , "bSortable": false
      },{
            "aTargets":[ 3 ]
          , "sType": "text"
    
      }]
    });
      })
      </script>
    </body>
    </html>
     
  3. nauval azhar

    nauval azhar Beginner 2.0

    Messages:
    33
    Likes Received:
    6
    Trophy Points:
    8
    coba aja di console .. lihat error yang muncul itu apa ..
     
  4. xpreborn

    xpreborn Poster 2.0

    Messages:
    183
    Likes Received:
    4
    Trophy Points:
    18
    Saat dijalankan ga ada muncul error Om
    Tapi nilai dari '$no','$ipaddress','$apname','$group','$location','$comment' ga ada nampil, tp yg 'Coba StaticData1' nampil,
    menurut saya followup penulisan kodenya ga benar kayaknya tp saya ga tahu yg bnrnya seperti apa, kira dmn kurangnya yach Om?
     
  5. sentabi

    sentabi Expert 1.0

    Messages:
    681
    Likes Received:
    35
    Trophy Points:
    28
    Code:
    $query = "select * from daftarip order by groupname, apname";
      $result = mysqli_query($mysqlId, $query);
    
      $no = 0;
      while( list($id, $ipaddress, $apname, $group, $location, $comment) = mysqli_fetch_row($result) )
      {
      $no++;
      }
      echo "['$no','$ipaddress','$apname','$group','$location','$comment','Coba StaticData1']";
      mysqli_free_result($result);
    
    emang kalo bagian itu dijalanin muncul hasilnya? yang di bandingin itu ga bakalan pernah hasilnya sama, jadi yang salah script phpnya

    $mysqlId ini apaan?
     
    xpreborn likes this.
  6. xpreborn

    xpreborn Poster 2.0

    Messages:
    183
    Likes Received:
    4
    Trophy Points:
    18
    ketika saya echo ga nampil sich Om, tp ketika saya keluarin dari script diatas perintah phpnya saya letak di bawah </html> perintah phpnya muncul ketika di echo, kira2 salahnya dmn yach Om?

    Code:
    <?php
    include("koneksi.php");
    
      $query = "select * from daftarip order by groupname, apname";
      $result = mysqli_query($mysqlId, $query);
    
      $no = 0;
      while( list($id, $ipaddress, $apname, $group, $location, $comment) = mysqli_fetch_row($result) ) {
      $no++;
      echo "['$no,'$ipaddress','$apname','$group','$locatlocation','$comment','cobasaja']";
      }
    mysqli_free_result($result);
    ?>
    
    $mysqlId ini adalah koneksi ke databasenya yg dari koneksi.php nya Om

    $mysqlId = mysqli_connect($host, $user, $pass, $dbname);
     
  7. HelloWorldHost

    HelloWorldHost Poster 1.0

    Messages:
    69
    Likes Received:
    16
    Trophy Points:
    8
    Pakai datatables.js saja mas om, lebij lengkap urusan paging di handel oleh datatables bisa sorting searching tanpa perlu select ulang
     
    xpreborn likes this.
  8. xpreborn

    xpreborn Poster 2.0

    Messages:
    183
    Likes Received:
    4
    Trophy Points:
    18
    Yg link referensi saya di post #1 yach Om ?
    Saya ada coba2 sich yg itu Om namun saya belum paham cara penggunaannya, lalu saya coba cari2 caranya dapat referensi seperti yg post #2 nah saat test dapat kendala seperti di atas
     
  9. junior riau

    junior riau Hosting Guru Web Hosting

    Messages:
    3,228
    Likes Received:
    515
    Trophy Points:
    113
    <table id="example2" class="table table-bordered table-hover">iya betul saya setuju sama tuan @HelloWorldHost data tables itu saja gunakan
    logikanya
    select all -> print to table format -> datatable.js split into paging.
    penjelasannya begini :
    1. select all data seperti biasa
    2. tampilkan dalam bentuk table seprti biasa
    3. yang akan membagi bagi itu datatable.js

    perhatikan link ini
    https://almsaeedstudio.com/themes/AdminLTE/pages/tables/data.html

    lihat bagian head dia menginclud kan datatable.css ini untuk tampilan
    habis itu di bagian body, dia cetak seluruh data dalam 1 halaman
    lihat kebagian footer, ada include datatable.js
    kemudian sedikit kode untuk mengarahkan si js ke bagian table
    Code:
    <script>
      $(function () {
        $("#example1").DataTable();
        $('#example2').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "ordering": true,
          "info": true,
          "autoWidth": false
        });
      });
    </script>
    #example1 dan #example2 adalah id dari div
    lihat di source codenya ada <table id="example2" class="table table-bordered table-hover">
    penghubung datatable.js dengan table di source html adalah id itu
    jika tidak ada id didefenisikan, datatable kehilangan source/tidak ada source untuk di kelola
     
    xpreborn likes this.
  10. xpreborn

    xpreborn Poster 2.0

    Messages:
    183
    Likes Received:
    4
    Trophy Points:
    18
    @junior riau , Baik Om akan saya coba pahami dan pelajari dulu penjelasannya OM,
     
Loading...
Thread Status:
Not open for further replies.

Share This Page

Loading...