Design a data table using jQuery to implement Ajax Functions

At present, jQuery and PHP are undoubtedly excellent cooperation in Web development. Among them, PHP is easy to use and popular with developers. jQuery is flexible, simple, and powerful in front-end development, which can provide a lot of dazzling results. In the previous article, we mainly talked about the design of the table base class. This article will mainly introduce the testing and running sections, as well as adding AJAX functions to integrate jQuery.

Test Run

Now, we can test and test the effectiveness of the data table Assistant class we wrote in CI. Before testing, create a data table in MYSQL as follows:

 
 

  
  
CREATE DATABASE `dg_test`;  
  
  
CREATE TABLE `users` (  
  
  
`id` int(11) NOT NULL AUTO_INCREMENT,  
  
  
`username` varchar(80) NOT NULL,  
  
  
`password` varchar(32) NOT NULL,  
  
  
`email` varchar(255) NOT NULL,  
  
  
UNIQUE KEY `id` (`id`)  
  
  
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; 
 
 

Insert some initial data

 
 

  
  
INSERT INTO `users` (`id`, `username`, `password`, `email`) VALUES  
  
  
　(1, 'david', '12345', 'david@domain.com'),  
  
  
　(2, 'maria', '464y3y', 'maria@domain.com'),　(3, 'alejandro', 'a42352fawet', 'alejandro@domain.com'),  
  
  
(4, 'emma', 'f22a3455b2', 'emma@domain.com' 
 
 

Next, write the control layer test file named test. php and save it in the application/controller directory. The Code is as follows:

 
 

  
  
class Test extends CI_Controller{  
  
  
function __construct(){  
  
  
parent::__construct();  
  
  
$this->load->helper(array('datagrid','url'));  
  
  
$this->Datagrid = new Datagrid('users','id');  
  
  
}  
  
  
function index(){  
  
  
$this->load->helper('form');  
  
  
$this->load->library('session');  
  
  
$this->Datagrid->hidePkCol(true);  
  
  
$this->Datagrid->setHeadings(array('email'=>'E-mail'));  
  
  
$this->Datagrid->ignoreFields(array('password'));  
  
  
if($error = $this->session->flashdata('form_error')){  
  
  
echo "$error";  
  
  
}  
  
  
echo form_open('test/proc');  
  
  
echo $this->Datagrid->generate();  
  
  
echo Datagrid::createButton('delete','Delete');  
  
  
echo form_close();  
  
  
}  
  
  
function proc($request_type = ''){  
  
  
$this->load->helper('url');  
  
  
if($action = Datagrid::getPostAction()){  
  
  
$error = "";  
  
  
switch($action){  
  
  
case 'delete' :  
  
  
if(!$this->Datagrid->deletePostSelection()){  
  
  
$error = 'Items could not be deleted';  
  
  
}  
  
  
break;  
  
  
}  
  
  
if($request_type!='ajax'){  
  
  
$this->load->library('session');  
  
  
$this->session->set_flashdata('form_error',$error);  
  
  
redirect('test/index');  
  
  
} else {  
  
  
echo json_encode(array('error' => $error));  
  
  
}  
  
  
} else {  
  
  
die("Bad Request");  
  
  
}}  
  
  
　}  
  
  
　?> 
 
 

The following is a brief analysis of this test file. First, in its constructor, load the written datagrid data table helper file and the url helper class in the CI, and

 
 

  
  
$this->Datagrid = new Datagrid('users','id'); 
 
 

Initialize the construction method of the Data Assistant class, specify the table name as users, and the data column as id. Then

 
 

  
  
$this->Datagrid->setHeadings(array('email'=>'E-mail')); 
 
 

Set the header to be displayed and display the email as email. And pass

 
 

  
  
$this->Datagrid->ignoreFields(array('password')); 
 
 

If this parameter is set, the password column is not displayed in the data table "G. Next, call the generate () method to generate a table. In the proc () method, the user is responsible for processing the selected and deleted records, while in the if ($ request_type! = 'Ajax '){......} In this Code, it determines whether it is an ajax call. If it is not an ajax call, an error message is returned normally. Otherwise, an error message is returned using the json_encode method, this technique is also very common. The purpose of this technique is to satisfy both ajax and non-ajax calls.

The final running effect is as follows:

Integrate jQuery with AJAX Functions

Now we can add the AJAX function for it, so we need to integrate jQuery. Because this document is not a beginner's tutorial, it will not explain jQuery knowledge, but will explain how to integrate it directly. Create a new folder named js, place the jQuery library file in it, and create a new user. php file. The Code is as follows:

 
 

  
  
 
  
 
  
   <title>Users Management</title> 
  
  
   <script src="<?php echo base_url(); ?>js/jquery-1.6.3.min.js"></script> 
  
  
   <script src="<?php echo base_url(); ?>js/datagrid.js"></script> 
  
  
 
  
<body> 
  
  
<?php 
  
  
      $this->Datagrid->hidePkCol(true);  
  
  
      if($error = $this->session->flashdata('form_error')){  
  
  
         echo "<font color=red>$error</font>";  
  
  
      }  
  
  
      echo form_open('test/proc',array('class'=>'dg_form'));  
  
  
      echo $this->Datagrid->generate();  
  
  
      echo Datagrid::createButton('delete','Delete');  
  
  
      echo form_close();  
  
  
?> 
  
  
</body> 
  
  
 
 

Because ajax is used to determine which records in the table are selected and respond to the delete button event, only the above php code is retained, create a js/datagrid In the js directory. js file, you also need to modify the index method in the previous section as follows:

 
 

  
  
function index(){  
  
  
$this->load->helper('form');  
  
  
$this->load->library('session');  
  
  
$this->load->view('users');  
  
  
　} 
 
 

You can also modify the relevant CSS styles, for example:

 
 

  
  
.dg_form table{  
  
  
border:1px solid silver;  
  
  
}  
  
  
.dg_form th{  
  
  
background-color:gray;  
  
  
font-family:"Courier New", Courier, mono;  
  
  
font-size:12px;  
  
  
}  
  
  
.dg_form td{  
  
  
background-color:gainsboro;  
  
  
font-size:12px;  
  
  
}  
  
  
.dg_form input[type=submit]{  
  
  
margin-top:2px;  
  
  
　}  
 
 

In datagrid. js, add the following function methods:

 
 

  
  
$ (Function (){
  
  
$ ('. Dg_form: submit'). click (function (e ){
  
  
E. preventDefault ();
  
  
Var $ form = $ (this). parents ('form ');
  
  
Var action_name = $ (this). attr ('class'). replace ("dg_action _","");
  
  
Var action_control = $ ('');
  
  
$ Form. append (action_control );
  
  
Var post_data = $ form. serialize ();
  
  
Action_control.remove ();
  
  
Var script = $ form. attr ('action') + '/ajax ';
  
  
$. Post (script, post_data, function (resp ){
  
  
If (resp. error ){
  
  
Alert (resp. error );
  
  
} Else {
  
  
Switch (action_name ){
  
  
Case 'delete ':
  
  
// Remove deleted data from the data table
  
  
$ Form. find ('. dg_check_item: checked'). parents ('tr'). remove ();
  
  
Break;
  
  
Case 'anotheraction ':
  
  
..
  
  
Break;
  
  
}
  
  
}
  
  
}, 'Json ')
  
  
})
  
  
})
 
 

In the above Code, first use var $ form = $ (this). parents ('form'); to obtain the form name, and then use

 
 

  
  
var action_name = $(this).attr('class').replace("dg_action_","") 
 
 

Obtain the action name, while

 
 

  
  
var action_control = $('');  
  
  
$form.append(action_control);  
 
 

The hidden domain action_control is dynamically generated and added to the form through $ form. append (action_control.

Next, we will send the client data to the server through $. post (script, post_data, function (resp). The script variable defines the path for ajax sending,

Post_data is the form data serialized by $ form. serialize. Then, in the return value of the callback function, check whether the resp contains the error message. If the returned value contains the error message, use alert to display the information, and then use

 
 

  
  
$form.find('.dg_check_item:checked').parents('tr').remove(); 
 
 

A piece of code to remove deleted data rows from the server in the data table.

Finally, add the following code:

 
 

  
  
$('.dg_check_toggler').click(function(){  
  
  
var checkboxes = $(this).parents('table').find('.dg_check_item');  
  
  
if($(this).is(':checked')){  
  
  
checkboxes.attr('checked','true');  
  
  
} else {  
  
  
checkboxes.removeAttr('checked');  
  
  
}  
  
  
})  
 
 

This Code indicates that when you select the "select all" button in the table, the checkbox before all records in the table (stored in the variable checkboxes) will be searched ), then, if you have checked all the records in the checkbox box, you can use jQuery to set the attr attribute of the checkbox before all the records to true, that is, you can select all the records, and vice versa.

Summary

This article uses the famous php development framework CI and jQuery to guide readers on how to build a common data table help class and has ajax functions (implemented by jQuery ). You can learn a lot about the CI framework and jQuery skills and knowledge.

Original article: http://tech.it168.com/a2011/1027/1264/000001264981_all.shtml