البحث في الغشاء فرز Pagging Mengunakan Jquery

بواسطة · يونيو 29, 2015

Hai All ketemu lagi di bulan puasa yang berkah ini dengan pria ganteng asli sunda he..he, tutorial kali ini adalah Membuat Searching Sorting Pagging Mengunakan JqueryDataTables Php Bootstrap Mysqli.
DataTable adalah salah satu plugin dari jquery yang digunakan untuk menampilkan data dalam bentuk grid (Table) Beberapa fitur yang ada pada DataTable diantaranya :

– Searching (Pencarian Data)

– Sorting (Mengurutkan Data Berdasarkan Header Kolom)

– Pangging (Halaman)

– Batas tampilan da perhalaman dalam bentuk combobox

Sebelum kita mulai download terlebih dahulu JqueryDataTable & التمهيد nya, lalu simpan di folder htdocs anda, setelah itu kita buat database dengan nama Tutorial & Tabel baru di mysql seperti dibawah ini :

CREATE TABLE IF NOT EXISTS `master` (
`id_daftar` int(5) NOT NULL,
  `s_nama` varchar(150) NOT NULL,
  `s_jk` int(1) NOT NULL,
  `s_agama` int(1) NOT NULL,
  `s_tmp_lahir` varchar(100) NOT NULL,
  `s_tgl_lahir` تاريخ NOT NULL,
  `jrsn_pil1` int(4) NOT NULL,
  `jrsn_pil2` int(4) NOT NULL,
  `tgl_daftar` تاريخ NOT NULL,
  `nisn` varchar(15) NOT NULL,
  `noreg` varchar(10) NOT NULL,
  `Alamat` text NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=172 ;

Kita insert juga data ke tabel master seperti dibawah ini

INSERT INTO `master` (`id_daftar`, `s_nama`, `s_jk`, `s_agama`, `s_tmp_lahir`, `s_tgl_lahir`, `jrsn_pil1`, `jrsn_pil2`, `tgl_daftar`, "نيسن", "النرويج", "العنوان") قيم
(30, "لورد سوميندرا", 1, 1, 'Sadadad', "2009-03-01", 1103, 1254, "2015-04-08", "0001", "0001", "),
(31, عفيف براسيتا, 1, 0, ", "0000-00-00", 0, 0, "2015-04-08", "0002", "0002", "),
(32, نهر "ريفالدو", 1, 1, "بكاسي", "1999-06-19", 1289, 1103, "2015-04-08", "9994256564", "0003", "),
(33, "ميتا أوكتافياني", 2, 1, "جاكرتا", "2000-10-16", 2063, 1174, "2015-04-09", "0004", "0004", "),
(34, محمد نجري الغفاري, 1, 0, ", "0000-00-00", 0, 0, "11/04/2015", "0005", "0005", "),
(35, محمد يوسف, 1, 1, "جاكرتا", "2000-04-01", 1254, 1289, "2015/04/13", "0006", "0006", "),
(39, رزقي الرحمن, 1, 1, "جاكرتا", "2000-01-06", 1289, 1254, "2015-04-14", "0008", "0008", "),
(40, "ميزام فضلان أناندا", 1, 1, "جاكرتا", "2000-08-24", 2063, 1289, "2015/04/2015", "0009", "0009", "),
(41, ازكي فايزين, 1, 1, "جاكرتا", "1999-12-29", 2063, 1289, "2015/04/2015", "0010", "0010", "),
(42, "أنديكا فيبريانا", 1, 1, "04", "2000-02-04", 2063, 1174, "2015/04/2015", "0011", "0011", "),
(43, أطفال أنينديتو, 1, 1, "جاكرتا", "2000-06-04", 2063, 1174, "2015/04/2015", "0012", "0012", "),
(44, "ريزكي أبريانتو", 1, 1, "بيكاسي", "2000-04-15", 2063, 1174, "2015/04/2015", "0013", "0013", "),
(45, "AVREDHO OZA YAMADHA", 1, 1, 'ببطء', "2000-03-25", 1289, 1103, "2015/04/2015", "0014", "0014", "),
(46, 'SAYYID MUHAMMAD', 1, 1, "بكاسي", "2000-08-25", 1289, 1174, "2015-04-16", "0015", "0015", ");

Jika sudah kita buat file koneksi.php seperti dibawah ini :

<?بي أتش بي
 
$db = جديد mysqli("مضيف محلي",'جذر', "12345", 'درس تعليمي');
 
إذا($db->connect_errno > 0){
 
ال('Unable to connect to database [" . $db->خطأ في الاتصال . "]");
 }
?>

بعد ذلك نقوم بإنشاء ملف index.php على النحو التالي :

<!DOCTYPE html>
<لغة البرمجة>
  <رئيس>
    <عنوان>Membuat Serching Sorting Pagging Mengunakan JqueryDataTables Php Bootstrap Mysqli</عنوان>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <أسلوب>
      لغة البرمجة, الجسم, #map-canvas {
        ارتفاع: 100%;
        حافة: 0مقصف;
        حشوة: 0مقصف
      }
    </أسلوب>
	<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen"> 
	<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
	<link href="assets/css/jquery.dataTables.css" rel="stylesheet" media="screen">
	<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
 
  </رئيس>
 
  <الجسم>
 
 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></امتداد>
            <span class="icon-bar"></امتداد>
            <span class="icon-bar"></امتداد>
          </زر>
          <a class="brand" href="http://andeznet.com">AndezNet</أ>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="media.php">Back To Home</أ></في ال>
            </ال>
          </شعبة><!--/.nav-collapse ->
        </شعبة>
      </شعبة> 
  </شعبة>
  	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
 
				  <ص>&نسخ; <a href="http://andeznet.com">www.andeznet.com</أ>&نبسب<?بي أتش بي صدى صوت تاريخ("Y");?>
				</شعبة><!--/امتداد-->
			  </شعبة><!--/صف-->
			</شعبة><!--/امتداد-->
	</شعبة><!--/صف-->
 
 <div class="container">
<div class="table-responsive">
 <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>Noreg</th>
						<th>اسم</th>
						<th>Tempat Lahir</th>
						<th>Tanggal Lahir</th>
						<th>Tanggal Daftar</th>
 
					</tr>
				</thead>
 
 
				<tbody>
				<?بي أتش بي
				تضمن "koneksi.php";
				$view=mysqli_query($db,"select * from master");
				$no=0;
				في حين($صف=mysqli_fetch_array($view)){
				?>
					<tr>
						<td><?بي أتش بي صدى صوت $صف['10'];?></td>
						<td><?بي أتش بي صدى صوت $صف['1'];?></td>
						<td><?بي أتش بي صدى صوت $صف['4'];?></td>
						<td><?بي أتش بي صدى صوت $صف['5'];?></td>
						<td><?بي أتش بي صدى صوت $صف['8'];?></td>
 
					</tr>
				<?بي أتش بي
				}
				?>
				</tbody>
 
 </الطاولة>
</شعبة>
</شعبة>
 
 
 
	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
					<a name="contact"></أ>
				  <h2>www.andeznet.com</h2>
				  <p class="text-info">مستودع التكنولوجيا & معلومات</ص>
				  <ص>&نسخ; <a href="http://andeznet.com">www.andeznet.com</أ>&نبسب<?بي أتش بي صدى صوت تاريخ("Y");?></ص>
				</شعبة><!--/امتداد-->
			  </شعبة><!--/صف-->
			</شعبة><!--/امتداد-->
	</شعبة><!--/صف-->	
 
 
	 <script src="assets/js/jquery.js"></النصي>
	  <script src="assets/js/jquery.dataTables.js"></النصي>
	  <script src="assets/js/jquery.dataTables.min.js"></النصي>
 
	  <النصي>
	  $(وثيقة).ready(وظيفة() {
    $('#example').DataTable();
} );
	  </النصي>
 
  </الجسم>
</لغة البرمجة>

Jika sudah benar maka akan muncul seperti gambar dibawah ini :

datatablejquery

Ok sekian tutorial dari saya semoga bermanfaat di bulan puasa yang penuh berkah ini.

تحميل

العلامات:

ربما يعجبك أيضا...

7 استجابات

  1. erik يقول:
    يونيو 30, 2015 في 12:31 صباحا

    ولكن عندما أرغب في تسجيل الدخول باستخدام اسم المستخدم وكلمة المرور أعلاه ، فإنها لا تزال لا تعمل

    الرد
    • بورتغاستيا يقول:
      يونيو 30, 2015 في 12:48 صباحا

      ولكن عندما أرغب في تسجيل الدخول باستخدام اسم المستخدم وكلمة المرور أعلاه ، فإنها لا تزال لا تعمل

      الرد
  2. rivaldi يقول:
    يونيو 30, 2015 في 4:25 صباحا

    mantav om..
    nuhun tutorialnya.

    kalau ditambahkan read bagaimana ya om?
    jadi kita klik salah satu datanya,trus nampilin datanya.

    الرد

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.