Editor - New, Edit, and Delete function to work with Ignited Datatables
Editor - New, Edit, and Delete function to work with Ignited Datatables
mark_aito
Posts: 3Questions: 1Answers: 0
Hi everyone, first of all I am new to here and ill doing my best to explain my problems clearly also I have searched many times but it seems my brain can't comprehend the codes well. :D
How to pass value from Javascript-ajax to Codeigniter Controller?
Coding proper syntax for Ignited DataTables in Codeigniter for use with the New, Edit and Delete function in tableTools.
This is my php file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Students Table</title>
<link rel="stylesheet" type="text/css" href="<?=base_url();?>dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<?=base_url();?>dist/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="<?=base_url();?>dist/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="<?=base_url();?>dist/css/editor.bootstrap.css">
<!-- <link rel="stylesheet" type="text/css" href="<?=base_url();?>dist/css/dataTables.editor.min.css"> -->
<style type="text/css" class="init">
body { font-size: 140%; }
</style>
<script type="text/javascript" language="javascript" src="<?=base_url();?>dist/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="<?=base_url();?>dist/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="<?=base_url();?>dist/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="<?=base_url();?>dist/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" language="javascript" src="<?=base_url();?>dist/js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="<?=base_url();?>dist/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="<?=base_url();?>dist/js/editor.bootstrap.js"></script>
<script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajax": {
create: {
type: 'POST',
// I want to pass the data input to the controller and upload to database
url: '<?=base_url();?>index.php/site/insertdatabyajax'
},
edit: {
type: 'PUT',
// I want to edit the row and pass the data to the controller and upload to database
url: '<?=base_url();?>index.php/site/updatedatabyajax'
},
remove: {
// I want to delete one or more rows selected
type: 'DELETE',
url: '<?=base_url();?>index.php/site/deletedatabyajax'
}
},
"table": "#example",
"fields": [ {
"label": "First name:",
"name": "first_name"
}, {
"label": "Last name:",
"name": "last_name"
}, {
"label": "Course:",
"name": "course"
}
]
} );
$('#example').DataTable( {
dom: "Tfrtip",
ajax: {
url: "<?=base_url();?>index.php/site/getdatabyajax",
type: "POST"
},
serverSide: true,
columns: [
{ data: "id" },
{ data: "first_name" },
{ data: "last_name" },
{ data: "course" }
],
tableTools: {
sRowSelect: "os",
sSwfPath: "<?=base_url();?>dist/swf/copy_csv_xls_pdf.swf",
aButtons: [
{ sExtends: "editor_create", editor: editor },
{ sExtends: "editor_edit", editor: editor },
{ sExtends: "editor_remove", editor: editor },
{
sExtends: "collection",
sButtonText: "Save As",
sButtonClass: "save-collection",
aButtons: [ 'copy', 'csv', 'xls', 'pdf' ]
},
'print'
]
}
} );
} );
</script>
</head>
<body class="editor wide comments example">
<div class="container">
<section>
<h1>Students Table</span></h1>
<div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
<table id="example" class="table table-striped table-bordered table-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Course</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Course</th>
</tr>
</tfoot>
</table>
</div>
</section>
</div>
</body>
</html>
and this is my controller:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Site extends CI_Controller {
public function index()
{
$this->load->view('post');
}
public function getdatabyajax()
{
$this->load->library('Datatables');
$this->datatables
->select('id, first_name, last_name, course')
->from('students');
echo $this->datatables->generate();
}
}
now this is the screenshot of the page:
http://snag.gy/tALy1.jpg
all the functions are working except for those I mentioned above.
Do you guys have an idea on how can I achieve it.
I'm sorry I can't up it in jsfiddle or other site.
Hope someone can hear me out, thanks. :)
This discussion has been closed.
Answers
This page in the Editor manual documents the parameters that the client-side sends to the server. How exactly you use that information will depend upon how CI works with reading POST data.
Allan
Thank you for your reply, I was hoping a bit of code snippet to guide me but thanks anyway. Will try to work it out. Thanks.
I'm afraid I don't use CI myself, so I'm not really able to help out much in that area.
Allan