Ci3 CURD Live Table Add Edit Delete using Ajax
,,,
cấu trúc thư mục
controllers/
- LiveTable.php
models/
- LiveTable_model.php
views/
- live_table.php
Cấu trúc CSDL
sample_data
- id int(10) AUTO_INCREMENT
- first_name varchar(255)
- last_name varchar(255)
- age varchar(255)
Config File
aplication/config/config.php
$config[‘base_url’] = ‘http://localhost/ci-live-table-add-edit-delete-using-ajax/’;
aplication/config/database.php
…
aplication/config/autoload.php
…
Controller LiveTable.php
aplication/controllers/
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class LiveTable extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('livetable_model');
}
function index()
{
$this->load->view('live_table');
}
function load_data()
{
$data = $this->livetable_model->load_data();
echo json_encode($data);
}
function insert()
{
$data = array(
'first_name' => $this->input->post('first_name'),
'last_name' => $this->input->post('last_name'),
'age' => $this->input->post('age')
);
$this->livetable_model->insert($data);
}
function update()
{
$data = array(
$this->input->post('table_column') => $this->input->post('value')
);
$this->livetable_model->update($data, $this->input->post('id'));
}
function delete()
{
$this->livetable_model->delete($this->input->post('id'));
}
}
Model LiveTable_model.php
aplication/models/
<?php
class LiveTable_model extends CI_Model
{
function load_data()
{
$this->db->order_by('id', 'DESC');
$query = $this->db->get('sample_data');
return $query->result_array();
}
function insert($data)
{
$this->db->insert('sample_data', $data);
}
function update($data, $id)
{
$this->db->where('id', $id);
$this->db->update('sample_data', $data);
}
function delete($id)
{
$this->db->where('id', $id);
$this->db->delete('sample_data');
}
}
?>
View live_table.php
aplication/views/
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slovnik - Live Table Add Edit Delete using Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body
{
margin:0;
padding:0;
background-color:#fff;
}
.box
{
width:900px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:10px;
}
</style>
</head>
<body>
<header class="masthead"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center p-3">
<h1 class="font-weight-light"><a class="hometit" href="index.php">Slovník</a></h1>
<p class="lead">Vietnamčinu - <mark>Slovenčinu</mark></p>
</div>
</div>
</div>
</header>
<div class="container boxx">
<h3 align="center">Live Table Add Edit Delete using Ajax</h3><br />
<div class="row">
<ul>
<li> RESPONSIVE TABLE</li>
<li> AJAX AUTO SAVE</li>
<li> ...</li>
</ul>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Slovenčina</th>
<th>Vietnamčina</th>
<th>Mô tả</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<footer class="container page-footer font-small blue pading-4">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2019 Copyright by
<a href="https://minhquydesign.com/"> minhquydesign.com</a>
</div>
<!-- Copyright -->
</footer>
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
function load_data()
{
$.ajax({
url:"<?php echo base_url(); ?>livetable/load_data",
dataType:"JSON",
success:function(data){
var html = '<tr>';
html += '<td id="first_name" contenteditable placeholder="Enter TT"></td>';
html += '<td id="last_name" contenteditable placeholder="Enter TV"></td>';
html += '<td id="age" contenteditable></td>';
html += '<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success"><span class="glyphicon glyphicon-plus"></span></button></td></tr>';
for(var count = 0; count < data.length; count++)
{
html += '<tr>';
html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="first_name" contenteditable>'+data[count].first_name+'</td>';
html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="last_name" contenteditable>'+data[count].last_name+'</td>';
html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="age" contenteditable>'+data[count].age+'</td>';
html += '<td><button type="button" name="delete_btn" id="'+data[count].id+'" class="btn btn-xs btn-danger btn_delete"><span class="glyphicon glyphicon-remove"></span></button></td></tr>';
}
$('tbody').html(html);
}
});
}
load_data();
$(document).on('click', '#btn_add', function(){
var first_name = $('#first_name').text();
var last_name = $('#last_name').text();
var age = $('#age').text();
if(first_name == '')
{
alert('plece Enter First Name');
return false;
}
if(last_name == '')
{
alert('plece Enter Last Name');
return false;
}
$.ajax({
url:"<?php echo base_url(); ?>livetable/insert",
method:"POST",
data:{first_name:first_name, last_name:last_name, age:age},
success:function(data){
load_data();
}
})
});
$(document).on('blur', '.table_data', function(){
var id = $(this).data('row_id');
var table_column = $(this).data('column_name');
var value = $(this).text();
$.ajax({
url:"<?php echo base_url(); ?>livetable/update",
method:"POST",
data:{id:id, table_column:table_column, value:value},
success:function(data)
{
load_data();
}
})
});
$(document).on('click', '.btn_delete', function(){
var id = $(this).attr('id');
if(confirm("Bạn có chắc chắn muốn xoá không?"))
{
$.ajax({
url:"<?php echo base_url(); ?>livetable/delete",
method:"POST",
data:{id:id},
success:function(data){
load_data();
}
})
}
});
});
</script>
Đăng bởi November 15, 2020