Error 'sWidth'
Error 'sWidth'
yvetee
Posts: 29Questions: 7Answers: 0
Using datatables(server-side) with scroller. I am getting this error.
Unable to get property 'sWidth' of undefined or null reference.
jquery.dataTables.min.js (70,83)
js:
$(document).ready(function(){
$('#example').DataTable({
'processing': true,
'serverSide': true,
'ajax': {
'url':'aaa.php',
'type': 'post'
},
'deferRender': true,
'scrollY': 200,
'scrollCollapse': true,
'scroller': true,
'columns': [
{ 'data': 'app_id' },
{ 'data': 'app_date' },
{ 'data': 'work_id' },
{ 'data': 'app_price' },
{ 'data': 'doctor_id' },
{ 'data': 'assistant_id' },
{ 'data': 'place_id' },
{ 'data': 'offer_id' },
{ 'data': 'app_work_memo' },
{ 'data': 'app_price_paid' },
{ 'data': 'app_paid_to' },
{ 'data': 'payment_id' },
{ 'data': 'receipt_id' },
{ 'data': 'app_payment_memo' }
]
});
});
html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.1/css/scroller.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.1/js/dataTables.scroller.min.js"></script>
<table class="display table table-hover" id="example" style="width:100%; margin-top:20px;font-size:90%;">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Work</th>
<th>Price</th>
<th>Doctor</th>
<th>Assistant</th>
<th>Place</th>
<th>Offer</th>
<th>Appointment Memo</th>
<th>Paid</th>
<th>To</th>
<th>PayBy</th>
<th>Tax</th>
<th>Payment Memo</th>
<th>Action</th>
</tr>
</thead>
</table>
php:
<?php
$server = "localhost";
$username = "root";
$password = "";
$dbname = "ps_db";
// Create connection
try{
$conn = new PDO("mysql:host=$server;dbname=$dbname","$username","$password");
$conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
die('Unable to connect with the database');
}
## Read value
$draw = $_POST['draw'];
$row = $_POST['start'];
$rowperpage = $_POST['length']; // Rows display per page
$columnIndex = $_POST['order'][0]['column']; // Column index
$columnName = $_POST['columns'][$columnIndex]['data']; // Column name
$columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
$searchValue = $_POST['search']['value']; // Search value
$searchArray = array();
## Search
$searchQuery = " ";
if($searchValue != ''){
$searchQuery = " AND (app_id LIKE :app_id or
app_date LIKE :app_date OR
work_id LIKE :work_id OR
app_price LIKE :app_price OR
doctor_id LIKE :doctor_id OR
assistant_id LIKE :assistant_id OR
place_id LIKE :place_id OR
offer_id LIKE :offer_id OR
app_work_memo LIKE :app_work_memo OR
app_price_paid LIKE :app_price_paid OR
app_paid_to LIKE :app_paid_to OR
payment_id LIKE :payment_id OR
receipt_id LIKE :receipt_id OR
app_payment_memo LIKE :app_payment_memo ) ";
$searchArray = array(
'app_id'=>"%$searchValue%",
'app_date'=>"%$searchValue%",
'work_id'=>"%$searchValue%",
'app_price'=>"%$searchValue%",
'doctor_id'=>"%$searchValue%",
'assistant_id'=>"%$searchValue%",
'place_id'=>"%$searchValue%",
'offer_id'=>"%$searchValue%",
'app_work_memo'=>"%$searchValue%",
'app_price_paid'=>"%$searchValue%",
'app_paid_to'=>"%$searchValue%",
'payment_id'=>"%$searchValue%",
'receipt_id'=>"%$searchValue%",
'app_payment_memo'=>"%$searchValue%"
);
}
## Total number of records without filtering
$stmt = $conn->prepare("SELECT COUNT(*) AS allcount FROM tblappointment ");
$stmt->execute();
$records = $stmt->fetch();
$totalRecords = $records['allcount'];
## Total number of records with filtering
$stmt = $conn->prepare("SELECT COUNT(*) AS allcount FROM tblappointment WHERE 1 ".$searchQuery);
$stmt->execute($searchArray);
$records = $stmt->fetch();
$totalRecordwithFilter = $records['allcount'];
## Fetch records
$stmt = $conn->prepare("SELECT * FROM tblappointment WHERE 1 ".$searchQuery." ORDER BY ".$columnName." ".$columnSortOrder." LIMIT :limit,:offset");
// Bind values
foreach($searchArray as $key=>$search){
$stmt->bindValue(':'.$key, $search,PDO::PARAM_STR);
}
$stmt->bindValue(':limit', (int)$row, PDO::PARAM_INT);
$stmt->bindValue(':offset', (int)$rowperpage, PDO::PARAM_INT);
$stmt->execute();
$empRecords = $stmt->fetchAll();
$data = array();
foreach($empRecords as $row){
$data[] = array(
"app_id"=>$row['app_id'],
"app_date"=>$row['app_date'],
"work_id"=>$row['work_id'],
"app_price"=>$row['app_price'],
"doctor_id"=>$row['doctor_id'],
"assistant_id"=>$row['assistant_id'],
"place_id"=>$row['place_id'],
"offer_id"=>$row['offer_id'],
"app_work_memo"=>$row['app_work_memo'],
"app_price_paid"=>$row['app_price_paid'],
"app_paid_to"=>$row['app_paid_to'],
"payment_id"=>$row['payment_id'],
"receipt_id"=>$row['receipt_id'],
"app_payment_memo"=>$row['app_payment_memo']
);
}
## Response
$response = array(
"draw" => intval($draw),
"iTotalRecords" => $totalRecords,
"iTotalDisplayRecords" => $totalRecordwithFilter,
"aaData" => $data
);
echo json_encode($response);
This discussion has been closed.
Answers
Make a change in js
Now i see all the time in table body vertical lines, like the one when it loading data.
also, sometimes when i scroll data is not showing(maybee server is slow).
Any solution for the vertical lines? and pls someone check if my code is correct.
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin