philippoommen1
Member
Hi,
Those who have done some work with JQuery please help me.
I am trying to populate the records from Sport200o DB, employee records. I partially suceed in that. I would like to improvise this. Is it the right way to fetch the data ? Here in case of massive data in the table, entire data coming to the grid. Instead of this how can bring the record in batches from the database to Grid when user flip to the NEXT & PREV pages (Only 50. 60 , , 70 ... records will fetch depends on the drop down selection in the grid page)? Give some clues how to make this small code to very generic. Means passing the table name and field names as arguments instead hard coding.
TIA
-Philip-
Those who have done some work with JQuery please help me.
I am trying to populate the records from Sport200o DB, employee records. I partially suceed in that. I would like to improvise this. Is it the right way to fetch the data ? Here in case of massive data in the table, entire data coming to the grid. Instead of this how can bring the record in batches from the database to Grid when user flip to the NEXT & PREV pages (Only 50. 60 , , 70 ... records will fetch depends on the drop down selection in the grid page)? Give some clues how to make this small code to very generic. Means passing the table name and field names as arguments instead hard coding.
TIA
-Philip-
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Build CRUD DataGrid with jQuery EasyUI - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
</head>
<body>
<h2>CRUD DataGrid</h2>
<p>Double click the row to begin editing.</p>
<table id="dg" title="My Users" style="width:700px;height:250px"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
<th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
<th field="phone" width="50" editor="text">Phone</th>
<th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">Add</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Delete</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
$(function(){
$('#dg').edatagrid({
url: 'get_users.p',
saveUrl: 'save_user.p',
updateUrl: 'update_user.p',
destroyUrl: 'destroy_user.p'
});
});
</script>
</body>
</html>