Ambilgratis.com – kami mengumpulkan informasi yang terserak dan tersebar

untuk melakukan load datagrid dari sebuah button , kita akan seditik tricky yaitu memberi button reset dengan query pencarian kosong sehinga sama dengan kita meload data awal

seperti select * where data =”

berikut tabel htmlnya datagridnya , kita akan meload data dari datagrid dengan

<table id="dg" title="Menu Data Kategori" class="easyui-datagrid" style="width:700px;height:250px"
url="alamatloaddata"
toolbar="#toolbar" pagination="true" loadMsg="Loading!..."
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" hidden='true' width="50">ID</th>
<th field="kat" width="50">Kategori</th>
</tr>
</thead>
</table>

<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">Tambah Kategori</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Kategori</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Delete Kategori</a>
<span>Kategori:</span>
<input id="cari" style="line-height:26px;border:1px solid #ccc">

<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
<span style="float:right;padding:5px">
<a href="#" class="easyui-linkbutton" plain="true" onclick="reset()">Reset</a>
</span>
</div>
<!-- form save -->
<div id="dlg" class="easyui-dialog" style="width:500px;height:200px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">Isi untuk menambah kategori</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>Nama Kategori</label>
<input name="kat" class="easyui-textbox" type="text">
<input name="id" type="hidden">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save()" style="width:90px">Simpan</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Batal</a>
</div>

file resetnya

function reset(){
$('#cari').val('');
$('#dg').datagrid('load',{
cari: $('#cari').val()

})

untuk mengkaitkan tombol reset dengan load datanya tulis onclick=”reset()” seperti pada kode dibawah ini

<a href=”#” class=”easyui-linkbutton” plain=”true” onclick=”reset()”>Reset</a>

$(‘#dg’).datagrid(‘load’,{
cari: $(‘#cari’).val()

})

adalah kode untuk meload data grid ke url yang telah dipasang dengan membawa variabel cari dengan metode post

semoga berguna 🙂

referensi

• http://stackoverflow.com/questions/16915827/how-to-load-datagrid-of-easyui-with-json-data-on-click-of-a-button-search-and