Tutorial PHP Pemula & Mahir

Question

ComboGrid jquery autoComplete + keyboard + pagination

Indra Hadi · Nov 15, 2012

Mohon Bantuannya, ini adalah code Server.php :

<?php
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
$searchTerm = $_GET['searchTerm'];
if(!$sidx) $sidx =1;
if ($searchTerm=="") {
	$searchTerm="%";
} else {
	$searchTerm = "%" . $searchTerm . "%";
}

$dbhost = "localhost";
$dbuser = "root";
$dbpassword = "";
$database = "test";

// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());

mysql_select_db($database) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM title WHERE name like '$searchTerm'");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];

if( $count >0 ) {
	$total_pages = ceil($count/$limit);
} else {
	$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
if($total_pages!=0) $SQL = "SELECT * FROM title WHERE name like '$searchTerm'  ORDER BY $sidx,$sord LIMIT $start , $limit";
else $SQL = "SELECT * FROM title WHERE name like '$searchTerm'  ORDER BY $sidx,$sord";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());

$response->page = $page;
$response->total = $total_pages;
$response->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
/*
    $response->rows[$i]['id']=$row[id];
    $response->rows[$i]['cell']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
*/
    $response->rows[$i]['id']=$row['id'];
    $response->rows[$i]['name']=$row['name'];
    $response->rows[$i]['author']=$row['author'];
    //$response->rows[$i]=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
    $i++;
}        
echo json_encode($response);

?>

berikut ini merupakan penggunaannya index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ComboGrid Zero-Configuration demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="resources/css/smoothness/jquery-ui-1.8.9.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="resources/css/smoothness/jquery.ui.combogrid.css"/>
<script type="text/javascript" src="resources/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="resources/jquery/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="resources/plugin/jquery.ui.combogrid-1.6.2.js"></script>
<script>
jQuery(document).ready(function(){
	$( "#project" ).combogrid({
		debug:true,
		resetButton:true,
		searchButton:true,
		colModel: [{'columnName':'id','width':'10','label':'id'}, {'columnName':'name','width':'45','label':'title'},{'columnName':'author','width':'45','label':'author'}],
		url: 'server.php',
		select: function( event, ui ) {
			$( "#project" ).val( ui.item.name );
			return false;
		}
	});
});
</script>
</head>
<body>
	<div>
			<code>jQuery(document).ready(function(){</code><br/>
			<code style="padding-left:10px;">$( "#project" ).combogrid({</code><br/>
			<code style="padding-left:20px;">debug:true,</code><br/>
			<code style="padding-left:20px;">searchButton:true,</code><br/>
			<code style="padding-left:20px;">resetButton:true,</code><br/>
			<code style="padding-left:20px;">colModel: [{'columnName':'id','width':'10','label':'id'},</code><br/>
			<code style="padding-left:97px;">{'columnName':'name','width':'45','label':'title'},</code><br/>
			<code style="padding-left:97px;">{'columnName':'author','width':'45','label':'author'}],<code><br/>
			<code style="padding-left:20px;">url: '/server.php',</code><br/>
			<code style="padding-left:20px;">//"select item" event handler to set input field</code><br/>
			<code style="padding-left:20px;">select: function( event, ui ) {</code><br/>
			<code style="padding-left:30px;">$( "#project" ).val( ui.item.name );</code><br/>
			<code style="padding-left:30px;">return false;</code><br/>
			<code style="padding-left:20px;">}</code><br/>
			<code style="padding-left:10px;">});</code><br/>
			<code>});</code><br/>
			<p>Click on the search button to open the menu. After select an item click on the reset button to reset field.</p><br/>
		<div style="float:left"><input size="30" id="project"/></div>
	</div>
</body>
</html>

Permasalahannya adalah file server.php tidak dapat mengirimkan hasil request dari file index.php. Hasil pengiriman berbentuk JSON.

File diatas di ambil di http://combogrid.justmybit.com/

Silahkan login untuk menjawab!

Answer 1

0

Ellyx Christian · Nov 15, 2012 · 0 Suka · 0 Tidak Suka

saya coba kunjungi link yang kamu kasi dan demo-nya tidak berjalan sama sekali, kemudian dari contoh kode yang dikasi juga tidak jelas. Jadi saya sarakan untuk memakai plugin lain DataTable contoh:
http://datatables.net/release-datatables/examples/data_sources/server_side.html