PHP Scripts – WordPress Tutorials

I am today going to provide Ajax sorting in PHP. I will use a “users”  MySQL table for my tutorial. I will divide my tutorial in few steps so that I can let you understand Sorting using AJAX easily.

My very first step is to create a table in MySQL, you can copy this query and execute this in SQL section of your tool.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
CREATE TABLE IF NOT EXISTS `users` (

`id` int(10) NOT NULL AUTO_INCREMENT,

`saluation` varchar(250) DEFAULT NULL,

`firstname` varchar(250) DEFAULT NULL,

`surname` varchar(250) DEFAULT NULL,

`password` varchar(250) DEFAULT NULL,

`address` varchar(250) DEFAULT NULL,

`address2` varchar(250) DEFAULT NULL,

`city` varchar(250) DEFAULT NULL,

`zip` varchar(250) DEFAULT NULL,

`country` varchar(250) DEFAULT NULL,

`phone` varchar(250) DEFAULT NULL,

`mobile` varchar(250) DEFAULT NULL,

`email` varchar(250) DEFAULT NULL,

`status` varchar(250) NOT NULL DEFAULT 'inactive',

`start_date` timestamp NULL DEFAULT CURRENT_TIMESTAMP,

`expiry_date` datetime DEFAULT NULL,

`last_login` datetime DEFAULT NULL,

`last_logout` datetime DEFAULT NULL,

`flag` varchar(50) DEFAULT 'ofline',

PRIMARY KEY (`id`)

)

sorting mysql data in php and ajax

Demo                                                                  Download Code

Now we have table “users”, insert some dummy values in this table. So that we can have some data to see the demo.

Second step is to build connection between your PHP files and MySQL server.

You need to create a file named as “config.php” and then copy and paste this code in that file.

1
2
3
4
5
6
7
8
9
10
11
$servername='localhost';

$dbusername='root';

$dbpassword='';

$dbname='swissmetrics';

$link=mysql_connect ("$servername","$dbusername","$dbpassword");

mysql_select_db("$dbname",$link) or die ("could not open db".MySQL_error());

if you want to understand this connection establishment deeply then read my article “Connection between MySQL and PHP

 

Third step is to create a file main.php”

And then create a form in that file, just copy and paste this code in main.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="ajaxlearning" id="ajaxlearning">

Sort By:<select name="dropdown" id="dropdown" onchange="dynamic_Select(this.value)">

<option value="">Select Filter</option>

<option value="saluation">Saluation</option>

<option value="surname">Surname</option>

<option value="firstname">First Name</option>

</select>

</form>

You have observed that there is onchange function called in select of the form. This function is also part of this “main.php” File. This function will call ajax method to call the records from another file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

function dynamic_Select(dropdown) {

$.ajax({

type: "GET",

url: 'values.php',

data: "ch=" + dropdown,

dataType: "html",

success: function(html){$("#txtResult").html(html); $("#firstresult").css("display", "none");}

});

}

</script>

This will get value of your selected option and then pass that value to the file “values.php”, this file will call the values accordingly. And then display those values on your page without refreshing your page.

Here is the code for “values.php”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php

include('config.php');

$order  =             $_GET['ch'];

if($order!='')

{

$query  =             "SELECT * FROM users Order By $order ASC";

}

else

{

$query  =             "SELECT * FROM users";

}

$res       =             mysql_query($query);

?>

<table id="mytable" cellspacing="0" summary="Sorting MySQL Data Using PHP and Ajax">

<caption>Sorting MySQL Data Using PHP and Ajax</caption>

<tr>

<th scope="col">Saluation</th>

<th scope="col">Surname</th>

<th scope="col">FirstName</th>

</tr>

<?php

while($row = mysql_fetch_array($res))

{

echo '<tr>

<td>'.$row['saluation'].'</td>

<td>'.$row['surname'].'</td>

<td>'.$row['firstname'].'</td>

</tr>';

}

?>

</table>

Demo                                                                  Download Code

I hope you will like my tutorial. Please don’t forget to comment and subscribe my blog.

Random Posts


Categories: Ajax, MySQL, PHP