Agregar AJAX al proyecto
jorge-koki opened this issue · comments
If anyone is trying to integrate AJAX and DATATABLE I will show you how I did it.
Show records and add register
note/index
<form method="post" id="new_form_notes">
<label>Nota: </label>
<input type="text" name="note_text" id="note_text"/>
<input type="hidden" name="csrf_token" value="<?= Csrf::makeToken(); ?>" />
<button type="submit" >Agregar</button>
</form>
<table id="note_data" >
<thead>
<tr>
<td>Id</td>
<td>Note</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
</thead>
</table>
In _templates/footer.php
<script type="text/javascript" language="javascript" >
var url = "<?php echo Config::get('URL'); ?>";
var csrf_token = "<?= Csrf::makeToken(); ?>";
</script>
<script src="<?php echo Config::get('URL'); ?>js/demo.js"></script>
demo.js
$(document).ready(function(){
var dataTable = $('#note_data').DataTable({
"processing":true,
"serverSide":true,
"order":[],
"ajax":{
url: url + 'Note/tableNote',
type:"POST",
data: { csrf_token : csrf_token }
}
});
$(document).on('submit', '#new_form_notes', function (event) {
event.preventDefault();
$.ajax({
url: url + 'Note/Create',
type: "post",
dataType: "json",
data: new FormData(this),
cache: false,
contentType: false,
processData: false
}).always(function () {
}).done(function (response) {
dataTable.ajax.reload();
console.log(response);
if(response =='insertado'){
alert('Datos insertados')
}else{
alert(response)
}
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log("Ha ocurrido un error inesperado " + jqXHR + " " + textStatus + " " + errorThrown);
console.warn(jqXHR.responseText)
});
});
});
Controller/NoteController.php
public function tableNote()
{
// check if csrf token is valid
if (!Csrf::isTokenValid()) {
LoginModel::logout();
Redirect::home();
exit();
}else{
$response = NoteModel::datatable();
echo $response;
}
}
public function create()
{
if (!Csrf::isTokenValid()) {
LoginModel::logout();
Redirect::home();
exit();
}else{
$response = NoteModel::createNote( Request::post('note_text'));
echo $response;
}
}
Model/NoteModel.php
public static function get_total_all_records()
{
$database = DatabaseFactory::getFactory()->getConnection();
$statement = $database->prepare("SELECT * FROM notes");
$statement->execute();
return $statement->rowCount();
}
public static function datatable()
{
$database = DatabaseFactory::getFactory()->getConnection();
$query = '';
$columns = array('note_id', 'note_text', 'note_id', 'note_id');
$output = array();
$query .= "SELECT * FROM notes ";
if (isset($_POST["search"]["value"])) {
$query .= ' WHERE note_text LIKE "%' . $_POST["search"]["value"] . '%" ';
$query .= 'OR note_id LIKE "%' . $_POST["search"]["value"].'%" ';
}
if (isset($_POST["order"])) {
$query .= 'ORDER BY ' . $columns[$_POST['order']['0']['column']] . ' ' . $_POST['order']['0']['dir'] . '
';
} else {
$query .= 'ORDER BY note_id DESC ';
}
if ($_POST["length"] != -1) {
$query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$statement = $database->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach ($result as $row) {
$sub_array = array();
$sub_array[] = $row->note_id;
$sub_array[] = $row->note_text;
$sub_array[] = '<button type="button" name="update" id="' . $row->note_id . '" class="btn btn-warning btn-xs update">Update</button>';
$sub_array[] = '<button type="button" name="delete" id="' . $row->note_id . '" class="btn btn-danger btn-xs delete">Delete</button>';
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $filtered_rows,
"recordsFiltered" => self::get_total_all_records(),
"data" => $data
);
echo json_encode($output, true);
}
public static function createNote( $note_text )
{
$database = DatabaseFactory::getFactory()->getConnection();
$sql = "INSERT INTO notes (note_text, user_id) VALUES (:note_text, :user_id)";
$query = $database->prepare($sql);
$query->execute(array(
':note_text' => $note_text,
':user_id' => Session::get('user_id')));
if ($query->rowCount() == 1) {
$mens = 'insertado';
}else{
$mens = 'sinCambios';
}
echo $mens;
}