Develop Reference

Trouble with datatables reload()

I want to populate a jQuery datatable based on the content of a textarea. Note: my datatables implementation is not serverside. That is: sorting/filtering happens on the client.
I know my php works as it returns expected results in my test scenario (see below). I have included a lot of code to provide context. I am new to datatables and php.
My html looks like this:
// DataTable Initialization
// (no ajax yet)
$('#selectedEmails').DataTable({
select: {
sytle: 'multiple',
items: 'row'
},
paging: false,
scrollY: '60vh',
scrollCollapse: true,
columns: [
{data: "CONICAL_NAME"},
{data: "EMAIL_ADDRESS"}
]
});
// javascript that defines the ajax (called by textarea 'onfocus' event)
function getEmails(componentID) {
deselectTabs();
assignedEmails = document.getElementById(componentID).value.toUpperCase().split(",");
alert(JSON.stringify(assignedEmails)); //returns expected json
document.getElementById('email').style.display = "block";
//emailTable = $('#selectedEmails').DataTable();
try {
$('#selectedEmails').DataTable().ajax =
{
url: "php/email.php",
contentType: "application/json",
type: "POST",
data: JSON.stringify(assignedEmails)
};
$('#selectedEmails').DataTable().ajax.reload();
} catch (err) {
alert(err.message); //I get CANNOT SET PROPERTY 'DATA' OF null
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- table skeleton -->
<table id="selectedEmails" class="display" style="width: 100%">
<thead>
<tr>
<th colspan='2'>SELECTED ADDRESSES</th>
</tr>
<tr>
<th>Conical Name</th>
<th>Email Address</th>
</tr>
</thead>
</table>
<!-- textarea definition -->
<textarea id='distribution' name='distribution' rows='3'
style='width: 100%' onblur="validateEmail('INFO_DISTRIBUTION', 'distribution');"
onfocus="getEmails('distribution');">
</textarea>
The following code returns the expected json:
var url = "php/email.php";
emailList = ["someone#mycompany.com","someoneelse#mycompany.com"];
fetch(url, {
method: 'post',
body: JSON.stringify(emailList),
headers: {
'Content-Type': 'application/json'
}
}).then(function (response) {
return response.text();
}).then(function (text) {
alert( JSON.stringify( JSON.parse(text))); //expencted json
}).catch(function (error) {
alert(error);
});
php code:
require "openDB.php";
if (!$ora) {
$rowsx = array();
$rowx = array("CONICAL_NAME" => "COULD NOT CONNECT", "EMAIL_ADDRESS" => "");
$rowsx[0] = $rowx;
echo json_encode($rowsx);
} else {
//basic query
$query = "SELECT CONICAL_NAME, EMAIL_ADDRESS "
. "FROM SCRPT_APP.BCBSM_PEOPLE "
. "WHERE KEY_EMAIL LIKE '%#MYCOMANY.COM' ";
//alter query to get specified entries if first entry is not 'everybody'
if ($emailList[0]!='everybody') {
$p = 0;
$parameters = array();
foreach ($emailList as $email) {
$parmName = ":email" . $p;
$parmValue = strtoupper(trim($email));
$parameters[$p] = array($parmName,$parmValue);
$p++;
}
$p0=0;
$query = $query . "AND KEY_EMAIL IN (";
foreach ($parameters as $parameter) {
if ($p0 >0) {
$query = $query.",";
}
$query = $query.$parameter[0];
$p0++;
}
$query = $query . ") ";
$query = $query . "ORDER BY CONICAL_NAME";
$getEmails = oci_parse($ora, $query);
foreach ($parameters as $parameter) {
oci_bind_by_name($getEmails, $parameter[0], $parameter[1]);
}
}
oci_execute($getEmails);
$row_num = 0;
try {
while (( $row = oci_fetch_array($getEmails, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
$rows[$row_num] = $row;
$row_num++;
}
$jsonEmails = json_encode($rows, JSON_INVALID_UTF8_IGNORE);
if (json_last_error() != 0) {
echo json_last_error();
}
} catch (Exception $ex) {
echo $ex;
}
echo $jsonEmails;
oci_free_statement($getEmails);
oci_close($ora);
}

Looking at a couple of examples on the DataTables site, I found I was making this more difficult than it needed to be: Here is my solution:
HTML: (unchanged)
<table id="selectedEmails" class="display" style="width: 100%">
<thead>
<tr>
<th colspan='2'>SELECTED ADDRESSES</th>
</tr>
<tr>
<th>Conical Name</th>
<th>Email Address</th>
</tr>
</thead>
</table>
<textarea id='distribution' name='distribution' rows='3'
style='width: 100%'
onblur="validateEmail('INFO_DISTRIBUTION', 'distribution');"
onfocus="getEmailsForTextBox('distribution');">
</textarea>
javascript:
Note: The key was the function for data: which returns json. (My php code expects json as input, and of course, outputs json).
[initialization]
var textbox = 'developer'; //global variable of id of textbox so datatables can use different textboxes to populate table
$(document).ready(function () {
$('#selectedEmails').DataTable({
select: {
sytle: 'multiple',
items: 'row'
},
ajax: {
url: "php/emailForList.php",
contentType: "application/json",
type: "post",
data: function (d) {
return JSON.stringify(document.getElementById(textbox).value.toUpperCase().split(","));
},
dataSrc: ""
},
paging: false,
scrollY: '60vh',
scrollCollapse: true,
columns: [
{data: "CONICAL_NAME"},
{data: "EMAIL_ADDRESS"}
]
});
});
[code that redraws table]
function getEmailsForTextBox(componentID) {
deselectTabs();
document.getElementById('email').style.display = "block";
textbox = componentID; //textbox is global variable that DataTable uses as source control
$('#selectedEmails').DataTable().ajax.reload();
}

active form multi model and multi attributes in Yii2

In my project, I have an aggregation between, let's say, a University model and a Department model: a university have at least one department, while every department belongs to only one university.
I'd like to have a possibility to create a university model instance with some number of department model instances and the exact number of departments is not known in advance (but at least one must exist). So, when creating a university, I'd like to have a page with one default department and an "Add Department" button that would allow me by means of javascript to add any number of departments that I need.
The question is: how should I write the create view page using ActiveForm in order that my POST array has the following structure:
"University" => ["name" => "Sorbonne", "city" => "Paris"],
"Faculty" => [
0 => ["name" => "Medicine", "dean" => "Person A"],
1 => ["name" => "Physics", "dean" => "Person B"],
2 => ["name" => "Mathematics", "dean" => "Person C"],
...
]
that I then pass to Faculty::loadMultiple() method.
I've tried something like this
$form = ActiveForm::begin();
echo $form->field($university, 'name')->textInput();
echo $form->field($university, 'city')->textInput();
foreach ($faculties as $i => $faculty) {
echo $form->field($faculty, "[$i]name")->textInput();
echo $form->field($faculty, "[$i]dean")->textInput()
}
ActiveForm::end();
It works, but when adding new department by means of javascript (I just clone an html node that contains department input fields), I am forced to elaborate the numbers coming from variable $i of the above php script. And this is quite annoying.
Another possibility that I've tried was to get rid of variable $i and write something like
$form = ActiveForm::begin();
echo $form->field($university, 'name')->textInput();
echo $form->field($university, 'city')->textInput();
foreach ($faculties as $faculty) {
echo $form->field($faculty, "[]name")->textInput();
echo $form->field($faculty, "[]dean")->textInput()
}
ActiveForm::end();
In this way, cloning the corresponding node is very simple, but the generated POST array has wrong structure due to [] brackets.
Is it possible to modify the latter approach and to have the required structure of the POST array?

Use Yii2 dynamic form extension:
Installation
The preferred way to install this extension is through composer.
Either run:
composer require --prefer-dist wbraganca/yii2-dynamicform "dev-master"
Or add to the require section of your composer.json file:
"wbraganca/yii2-dynamicform": "dev-master"
Demo page: Nested Dynamic Form
Nested Dynamic Form Demo Source Code:
Source Code - View: _form.php
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use wbraganca\dynamicform\DynamicFormWidget;
?>
<div class="person-form">
<?php $form = ActiveForm::begin(['id' => 'dynamic- form']); ?>
<div class="row">
<div class="col-sm-6">
<?= $form->field($modelPerson, 'first_name')->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-6">
<?= $form->field($modelPerson, 'last_name')->textInput(['maxlength' => true]) ?>
</div>
</div>
<div class="padding-v-md">
<div class="line line-dashed"></div>
</div>
<?php DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper',
'widgetBody' => '.container-items',
'widgetItem' => '.house-item',
'limit' => 10,
'min' => 1,
'insertButton' => '.add-house',
'deleteButton' => '.remove-house',
'model' => $modelsHouse[0],
'formId' => 'dynamic-form',
'formFields' => [
'description',
],
]); ?>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Houses</th>
<th style="width: 450px;">Rooms</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-house btn btn-success btn-xs"><span class="fa fa-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<?php foreach ($modelsHouse as $indexHouse => $modelHouse): ?>
<tr class="house-item">
<td class="vcenter">
<?php
// necessary for update action.
if (! $modelHouse->isNewRecord) {
echo Html::activeHiddenInput($modelHouse, "[{$indexHouse}]id");
}
?>
<?= $form->field($modelHouse, "[{$indexHouse}]description")->label(false)->textInput(['maxlength' => true]) ?>
</td>
<td>
<?= $this->render('_form-rooms', [
'form' => $form,
'indexHouse' => $indexHouse,
'modelsRoom' => $modelsRoom[$indexHouse],
]) ?>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-house btn btn-danger btn-xs"><span class="fa fa-minus"></span></button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php DynamicFormWidget::end(); ?>
<div class="form-group">
<?= Html::submitButton($modelPerson->isNewRecord ? 'Create' : 'Update', ['class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
Source Code - View: _form-rooms.php
<?php
use yii\helpers\Html;
use wbraganca\dynamicform\DynamicFormWidget;
?>
<?php DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_inner',
'widgetBody' => '.container-rooms',
'widgetItem' => '.room-item',
'limit' => 4,
'min' => 1,
'insertButton' => '.add-room',
'deleteButton' => '.remove-room',
'model' => $modelsRoom[0],
'formId' => 'dynamic-form',
'formFields' => [
'description'
],
]); ?>
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-room btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-rooms">
<?php foreach ($modelsRoom as $indexRoom => $modelRoom): ?>
<tr class="room-item">
<td class="vcenter">
<?php
// necessary for update action.
if (! $modelRoom->isNewRecord) {
echo Html::activeHiddenInput($modelRoom, "[{$indexHouse}][{$indexRoom}]id");
}
?>
<?= $form->field($modelRoom, "[{$indexHouse}][{$indexRoom}]description")->label(false)->textInput(['maxlength' => true]) ?>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-room btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
Source Code - Controller
<?php
namespace app\modules\yii2extensions\controllers;
use Yii;
use yii\helpers\ArrayHelper;
use yii\web\NotFoundHttpException;
use yii\web\Response;
use yii\widgets\ActiveForm;
use app\base\Model;
use app\base\Controller;
use app\modules\yii2extensions\models\House;
use app\modules\yii2extensions\models\Person;
use app\modules\yii2extensions\models\Room;
use app\modules\yii2extensions\models\query\PersonQuery;
/**
* DynamicformDemo3Controller implements the CRUD actions for Person model.
*/
class DynamicformDemo3Controller extends Controller
{
/**
* Lists all Person models.
* #return mixed
*/
public function actionIndex()
{
$searchModel = new PersonQuery();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}
/**
* Displays a single Person model.
* #param integer $id
* #return mixed
*/
public function actionView($id)
{
$model = $this->findModel($id);
$houses = $model->houses;
return $this->render('view', [
'model' => $model,
'houses' => $houses,
]);
}
/**
* Creates a new Person model.
* If creation is successful, the browser will be redirected to the 'view' page.
* #return mixed
*/
public function actionCreate()
{
$modelPerson = new Person;
$modelsHouse = [new House];
$modelsRoom = [[new Room]];
if ($modelPerson->load(Yii::$app->request->post())) {
$modelsHouse = Model::createMultiple(House::classname());
Model::loadMultiple($modelsHouse, Yii::$app->request->post());
// validate person and houses models
$valid = $modelPerson->validate();
$valid = Model::validateMultiple($modelsHouse) && $valid;
if (isset($_POST['Room'][0][0])) {
foreach ($_POST['Room'] as $indexHouse => $rooms) {
foreach ($rooms as $indexRoom => $room) {
$data['Room'] = $room;
$modelRoom = new Room;
$modelRoom->load($data);
$modelsRoom[$indexHouse][$indexRoom] = $modelRoom;
$valid = $modelRoom->validate();
}
}
}
if ($valid) {
$transaction = Yii::$app->db->beginTransaction();
try {
if ($flag = $modelPerson->save(false)) {
foreach ($modelsHouse as $indexHouse => $modelHouse) {
if ($flag === false) {
break;
}
$modelHouse->person_id = $modelPerson->id;
if (!($flag = $modelHouse->save(false))) {
break;
}
if (isset($modelsRoom[$indexHouse]) && is_array($modelsRoom[$indexHouse])) {
foreach ($modelsRoom[$indexHouse] as $indexRoom => $modelRoom) {
$modelRoom->house_id = $modelHouse->id;
if (!($flag = $modelRoom->save(false))) {
break;
}
}
}
}
}
if ($flag) {
$transaction->commit();
return $this->redirect(['view', 'id' => $modelPerson->id]);
} else {
$transaction->rollBack();
}
} catch (Exception $e) {
$transaction->rollBack();
}
}
}
return $this->render('create', [
'modelPerson' => $modelPerson,
'modelsHouse' => (empty($modelsHouse)) ? [new House] : $modelsHouse,
'modelsRoom' => (empty($modelsRoom)) ? [[new Room]] : $modelsRoom,
]);
}
/**
* Updates an existing Person model.
* If update is successful, the browser will be redirected to the 'view' page.
* #param integer $id
* #return mixed
*/
public function actionUpdate($id)
{
$modelPerson = $this->findModel($id);
$modelsHouse = $modelPerson->houses;
$modelsRoom = [];
$oldRooms = [];
if (!empty($modelsHouse)) {
foreach ($modelsHouse as $indexHouse => $modelHouse) {
$rooms = $modelHouse->rooms;
$modelsRoom[$indexHouse] = $rooms;
$oldRooms = ArrayHelper::merge(ArrayHelper::index($rooms, 'id'), $oldRooms);
}
}
if ($modelPerson->load(Yii::$app->request->post())) {
// reset
$modelsRoom = [];
$oldHouseIDs = ArrayHelper::map($modelsHouse, 'id', 'id');
$modelsHouse = Model::createMultiple(House::classname(), $modelsHouse);
Model::loadMultiple($modelsHouse, Yii::$app->request->post());
$deletedHouseIDs = array_diff($oldHouseIDs, array_filter(ArrayHelper::map($modelsHouse, 'id', 'id')));
// validate person and houses models
$valid = $modelPerson->validate();
$valid = Model::validateMultiple($modelsHouse) && $valid;
$roomsIDs = [];
if (isset($_POST['Room'][0][0])) {
foreach ($_POST['Room'] as $indexHouse => $rooms) {
$roomsIDs = ArrayHelper::merge($roomsIDs, array_filter(ArrayHelper::getColumn($rooms, 'id')));
foreach ($rooms as $indexRoom => $room) {
$data['Room'] = $room;
$modelRoom = (isset($room['id']) && isset($oldRooms[$room['id']])) ? $oldRooms[$room['id']] : new Room;
$modelRoom->load($data);
$modelsRoom[$indexHouse][$indexRoom] = $modelRoom;
$valid = $modelRoom->validate();
}
}
}
$oldRoomsIDs = ArrayHelper::getColumn($oldRooms, 'id');
$deletedRoomsIDs = array_diff($oldRoomsIDs, $roomsIDs);
if ($valid) {
$transaction = Yii::$app->db->beginTransaction();
try {
if ($flag = $modelPerson->save(false)) {
if (! empty($deletedRoomsIDs)) {
Room::deleteAll(['id' => $deletedRoomsIDs]);
}
if (! empty($deletedHouseIDs)) {
House::deleteAll(['id' => $deletedHouseIDs]);
}
foreach ($modelsHouse as $indexHouse => $modelHouse) {
if ($flag === false) {
break;
}
$modelHouse->person_id = $modelPerson->id;
if (!($flag = $modelHouse->save(false))) {
break;
}
if (isset($modelsRoom[$indexHouse]) && is_array($modelsRoom[$indexHouse])) {
foreach ($modelsRoom[$indexHouse] as $indexRoom => $modelRoom) {
$modelRoom->house_id = $modelHouse->id;
if (!($flag = $modelRoom->save(false))) {
break;
}
}
}
}
}
if ($flag) {
$transaction->commit();
return $this->redirect(['view', 'id' => $modelPerson->id]);
} else {
$transaction->rollBack();
}
} catch (Exception $e) {
$transaction->rollBack();
}
}
}
return $this->render('update', [
'modelPerson' => $modelPerson,
'modelsHouse' => (empty($modelsHouse)) ? [new House] : $modelsHouse,
'modelsRoom' => (empty($modelsRoom)) ? [[new Room]] : $modelsRoom
]);
}
/**
* Deletes an existing Person model.
* If deletion is successful, the browser will be redirected to the 'index' page.
* #param integer $id
* #return mixed
*/
public function actionDelete($id)
{
$model = $this->findModel($id);
$name = $model->first_name;
if ($model->delete()) {
Yii::$app->session->setFlash('success', 'Record <strong>"' . $name . '"</strong> deleted successfully.');
}
return $this->redirect(['index']);
}
/**
* Finds the Person model based on its primary key value.
* If the model is not found, a 404 HTTP exception will be thrown.
* #param integer $id
* #return Person the loaded model
* #throws NotFoundHttpException if the model cannot be found
*/
protected function findModel($id)
{
if (($model = Person::findOne($id)) !== null) {
return $model;
} else {
throw new NotFoundHttpException('The requested page does not exist.');
}
}
}

jQuery DataTable Show entries, Search box and sort not working?

I have an issues with datatable show entries 、sorting and filter basically all the JS function not working. I've already include the JS files. some details:my DataTables is server-side processing and retrieve data in json from serverside .
datatable.php
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$.fn.dataTable.ext.errMode = 'none';
var table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"jQueryUI": true,
"ordering": true,
"searching": true,
"order": [[1, 'desc']],//set column 1 (time)
"ajax": {
url: "process.php",
type: 'POST',
data: {
from: "<?php echo $from; ?>",
to: "<?php echo $to; ?>"
}
},
"columns": [
{
"className":'details-control',
"orderable":false,
"data":null,
"defaultContent": ''
},
{ "data": "time"},
{ "data": "message",
"render": function ( data, type, row )
{
data = data.replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);
return type === 'display' && data.length > 200 ?
'<span title="'+data+'">'+data.substr( 0, 98 )+'...</span>' :data;
}
}
]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format( row.data())).show();
tr.addClass('shown');
}
} );
} );
</script>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th ></th>
<th data-search-index="3">time</th>
<th data-search-index="3">Message</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>time</th>
<th>Message</th>
</tr>
</tfoot>
</table>
</body>
process.php
$search='';
$requestData= $_REQUEST;
if(isset($_POST["search"]["value"]) && !empty($_POST["search"]["value"])){
$search ='&q=_all:'.$_POST["search"]["value"];
}
$qryurl ='<ip>/log/_search?size=10'.$search ;
if ( !empty($requestData['start']) && $requestData['length'] != '-1' )
{
$qryurl ='<ip>/log/_search?size=10&from='.$requestData['start'].$search;
}
.......
//json output
$results = array(
"draw" => intval($requestData['draw']),
"iTotalRecords" =>intval($total),
"iTotalDisplayRecords" => intval($total),
"aaData"=>$sourceary
);
now I can see the table but I just can't sorting or searching and show more entries. any suggestion? Thank a lot, More

I think you need add a objects to your DataTable:
ordering: true,
searching: true,
order: [[0, 'asc']]//default
To your PHP code than you must add something like this for ordering:
if(count($_POST['order'])){
$orderBy = $_POST['columns'][$_POST['order'][0]['column']]['data'];
$orderDir = $_POST['order'][0]['dir'];
}
And for searching:
if(isset($_POST["search"]["value"]) && !empty($_POST["search"]["value"])){
$search = $_POST["search"]["value"];
}
For entries you must put this variables to your url:
$howMany = (isset($_POST['length'])) ? intval($_POST['length']) : 10;//10 is default its size param
$start = (isset($_POST['start'])) ? intval($_POST['start']) : 0;
And put this variables to your query.

How to append the data From dataTable in click event

i Have used following script, data doesn't load to dataTable, i got error click here to show error image
Here my jquery code
Table = $("#example").DataTable({
data:[],
columns: [
{ "data": "Course" },
{ "data": "Batch" },
{ "data": "Admission No" },
{ "data": "Rollno" },
{ "data": "Student Name" },
{ "data": "Email" }
],
rowCallback: function (row, data) {},
filter: false,
info: false,
ordering: false,
processing: true,
retrieve: true
});
$('.view_search_btn').click(function(){
//alert("clicked");
var search_key = $('input[name=view_stu_search]').val();
$('.box-body').show();
$.ajax({
url: "../live_search.php",
type: "post",
data: "key="+'view_student_search_key'+"&search_keyword="+search_key
}).done(function (result) {
Table.clear().draw();
Table.rows.add(result).draw();
}).fail(function (jqXHR, textStatus, errorThrown) {
// needs to implement if it fails
});
});// Click event close here
}); // document close here
and my php code is
if(!ctype_digit($_POST['search_keyword'])){
//echo "given value is string".$_POST['search_keyword'];
$rows = search_keyword($view_student_search_key);
//print_r($rows);
foreach($rows as $row)
{
$query = "SELECT a.stu_rollno, c.stu_course,c.stu_batch,a.admission_no,p.stu_firstname,p.stu_lastname,co.stu_email FROM current_course c, admission_details a,stu_personal_details p, stu_contact_details co WHERE a.stu_rollno = p.stu_rollno AND c.stu_rollno = co.stu_rollno AND a.stu_rollno = c.stu_rollno AND (c.stu_degree = ".$row['degree_id']." AND c.stu_course = ".$row['course_id']." AND c.stu_branch = ".$row['branch_id'].");";
//echo "<br><br>";
$run_query = mysqli_query($con, $query);
while($result = mysqli_fetch_array($run_query))
{
echo "
<tr>
<td>".$row['course_name']."</td>
<td>".$result['stu_batch']."</td>
<td>".$result['admission_no']."</td>
<td>".$result['stu_rollno']."</td>
<td>".$result['stu_firstname'].$result['stu_lastname']."</td>
<td>".$result['stu_email']."</td>
<td align='center'><a href='edit.php?rollno=".$result['stu_rollno']."&degree=".$row['degree_name']."&course=".$row['course_name']."&branch=".$row['branch_name']."' class='btn btn-info btn-sm btn-flat'><i class='fa fa-edit'></i> Edit</a>
<button type='button' class='btn btn-danger btn-sm btn-flat' name='remove_levels' data-toggle='modal' data-target='.bs-example-modal-sm'><i class='fa fa-close'></i> Delete</button>
</td>
</tr>
";
}
}
}`
this following function inside my php
function search_keyword($view_student_search_key)
{
$query = "SELECT d.degree_id,d.degree_name,c.course_id,c.course_name,b.branch_id,b.branch_name FROM degree d,courses c,branch b WHERE d.degree_id = c.degree_id AND b.course_id = c.course_id AND (d.degree_name like '%$view_student_search_key%' OR c.course_name like '%$view_student_search_key%' OR b.branch_name like '%$view_student_search_key%')";
global $con;
$run_query = mysqli_query($con, $query);
//Declare the rows to an array
$rows = array();
// Insert Each row to an array
while($row = mysqli_fetch_array($run_query))
{
$rows[] = $row;
}
// Return the array
return $rows;
}`

Here, You are adding total 6 td for header and Then for inner tr You are adding 7 td. So there is mismatch in datatable td for each row.
What you can do is:
Just add one more td to your datatable initialization preceding with , (comma):
{ "data": "Actions" }
Note: Action is a title for td of edit & other icons column.

Use xhr.dt and reload data using the datatables load() api.
xhr.dt will listen on the ajax call data when it gets loaded. You can clear and draw i.e append data in the xhr callback function. Hope that helps.

DataTables : DeferLoading is not working correctly

I have a mysql table with about 30000 rows. I have to put all rows in a DataTable and load each segment each time a table page is loaded (when you click on pagination). I saw that I can use the deferLoading parameter in my JS, but when I use it my pages are not loading. As you can see, I have to load images, so I absolutely have to do a light loading of the content...
Here is my HTML :
<table class="table table-striped table-bordered table-hover datatable products-datatable">
<thead>
<tr>
<th></th>
<th><?=_("Product")?></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th><?=_("Product")?></th>
<th></th>
</tr>
</tfoot>
</table>
Here is my JS :
var table = $('.products-datatable').dataTable( {
"order": [[ 1, "asc" ]],
"processing": true,
"serverSide": true,
"deferLoading": 30000,
"ajax": {
url: location.protocol + '//' + location.hostname + '/ajax/products.php?action=list',
type: "POST"
},
"columns": [
{ "data": "image",
"orderable": false,
"width": "80px" },
{ "data": "product" },
{ "data": "action",
"orderable": false,
"width": "20px",
"sClass": "class",
}
]
});
Here is my AJAX :
$req = $pdo->prepare('SELECT product_id, name FROM products');
if ( $req->execute() ) {
if ($req->rowCount()) {
$result['draw'] = 1;
$result['recordsTotal'] = $req->rowCount();
$result['recordsFiltered'] = 10;
$result['data'] = array();
$result['DT_RowId'][] = array();
while( $row = $req->fetch() ) {
if ($row['name']) { $name = $row['name']; } else { $name = "N/A"; }
$result['data'][] = array( "DT_RowId" => $row['product_id'],
"DT_RowClass" => 'myclass',
"image" => '<img src="' . HOSTNAME.'assets/img/products/' . $row['product_id'] . '.jpg" class="product_thumb">',
"product" => '' . $name . '',
"action" => "<i class=\"fa fa-close fa-2x text-danger\"></i>"
);
}
}
}
$req->closeCursor();
I'm sure there is something I missed... :-(

I believe you don't need to use deferLoading to benefit from server-side processing.
Your current script just returns all records and doesn't do sorting or filtering. You need to use ssp.class.php (available in DataTables distribution package) or emran/ssp class to correctly handle AJAX requests on the server.
DataTables library will send start and length parameters in AJAX request indicating which portion of the data is needed and your server-side processing class will correctly handle it for you.
Please see an example of server-side processing for more information.