Scribd
Upload
8K views3 pages

Script 1

The document contains JavaScript code to load and search a member table. It initializes by loading the member table. It also handles searching by keying up on the search input and making an AJAX call to filter the table. Clicking add member loads a form in the page content area. The page displays the member data table, a search box, and add/reload buttons.

Uploaded by

dhiforester33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8K views3 pages

Script 1

The document contains JavaScript code to load and search a member table. It initializes by loading the member table. It also handles searching by keying up on the search input and making an AJAX call to filter the table. Clicking add member loads a form in the page content area. The page displays the member data table, a search box, and add/reload buttons.

Uploaded by

dhiforester33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

<script>

$(document).ready(function(){

$('#TabelMember').load("_Page/Member/TabelMember.php");

});

//Pencarian

$('#PencarianMember').keyup(function(){

var keyword = $('#PencarianMember').val();

$.ajax({

type : 'POST',

url : '_Page/Member/TabelMember.php',

data : 'keyword='+ keyword,

success : function(data){

$('#TabelMember').html(data);

});

});

$('#TambahMember').click(function(){

var Loading='<div class="row text-center"><div class="form-group col col-md-12"><img


src="images/loading.gif"></div></div>';

$('#Halaman').html(Loading);

$('#Halaman').load('_Page/Member/TambahMember.php');

});

</script>

<div class="row">

<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 grid-margin stretch-card">

<div class="card card-statistics">


<div class="card-body">

<h3 class="text-primary"><i class="menu-icon mdi mdi-account-multiple"></i> Data


Member</h3>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col-lg-12 grid-margin">

<div class="card">

<div class="card-body">

<div class="row">

<div class="col col-lg-6">

<div class="input-group">

<input type="text" class="form-control" id="PencarianMember" class="form-control"


placeholder="Nama/Id" value="">

<div class="input-group-append border-primary">

<span class="input-group-text bg-transparent">

<i class="mdi mdi-menu mdi-search-web"></i>

</span>

</div>

</div>

</div>

<div class="col col-lg-6 text-right">

<button class="btn btn-rounded btn-outline-primary" id="TambahMember">

<i class="menu-icon mdi mdi-account-plus"></i> Tambah Member


</button>

<button class="btn btn-rounded btn-outline-warning" id="ReloadMember">

<i class="menu-icon mdi mdi-reload"></i> Reload

</button>

</div>

</div>

</div>

<div id="TabelMember">

<!----- Tabel disini ----->

</div>

</div>

</div>

</div>

You might also like