I don't have a best case, as this is the first time I've used DataTables
No debugging yet...just starting.
No errors, looking forward to some though?
I do not have a clue on how to stich the files together? I normally have CSS, js, images, documents, and includes as folders. I don't do the MVC structure. I stitch things together in the includes with an 'init.php' file which holds the db.php connection and any 'common files' such as header.php and footer.php. I use on each page <?php include("includes/init.php);?> . What is the 'official' folder structure for DataTables??? Thank you
↧
Built and downloaded "DataTables.zip. Now how do organize my files???
↧
Is there a callback for the $db->update() method?
I have an application that uses the $db->update() method to update a field in a related table. Next, I need to read back that related table (using a PDO query, as there is no editor for that table in this file), to build a groups fie for HTTP AUTH. I find that when I read back the related table I've updated, the update has not yet happened in the related table. It looks like I need a callback for the $db->update() method. I could not find documentation indicating that such a callback exists. Am I missing something, or tell me how I can get a callback with the $db->update() has finished?
Thanks,
Tom
↧
↧
Cannot read property 'Editor' of undefined
Hi guys, im following this example but i always get js error.
https://editor.datatables.net/examples/inline-editing/simple.html
I have download the Editor files and the files are new so i guess its not a license problem.
this is my code:
?php
$mysqli = new mysqli("127.0.0.1", "root", "", "vzsdgvsdb");
// Check connection
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();
}
// DataTables PHP library
include("lib/DataTables.php");
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
// Build our Editor instance and process the data coming from _POST
Editor::inst($db, 'datatables_demo')
->fields(
Field::inst('first_name')
->validator(Validate::notEmpty(ValidateOptions::inst()
->message('A first name is required')
)),
Field::inst('last_name')
->validator(Validate::notEmpty(ValidateOptions::inst()
->message('A last name is required')
)),
Field::inst('position'),
Field::inst('email')
->validator(Validate::email(ValidateOptions::inst()
->message('Please enter an e-mail address')
)),
Field::inst('office'),
Field::inst('extn'),
Field::inst('age')
->validator(Validate::numeric())
->setFormatter(Format::ifEmpty(null)),
Field::inst('salary')
->validator(Validate::numeric())
->setFormatter(Format::ifEmpty(null)),
Field::inst('start_date')
->validator(Validate::dateFormat('Y-m-d'))
->getFormatter(Format::dateSqlToFormat('Y-m-d'))
->setFormatter(Format::dateFormatToSql('Y-m-d'))
)
;?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery.dataTables.min.css"/>
<link rel="stylesheet" href="buttons.dataTables.min.css"/>
<link rel="stylesheet" href="select.dataTables.min.css"/>
<link rel="stylesheet" href="dataTables.dateTime.min.css"/>
<link rel="stylesheet" href="editor.dataTables.min.css"/>
<script src="jquery-3.5.1.js"></script>
<!--<script src="jquery.dataTables.min.js"></script>-->
<script src="dataTables.buttons.min.js"></script>
<script src="dataTables.select.min.js"></script>
<script src="dataTables.dateTime.min.js"></script>
</head>
<body class="nav-toggle">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th width="18%">Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "staff.php",
table: "#example",
fields: [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}
]
} );
// Activate an inline edit on click of a table cell
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "staff.php",
order: [[ 1, 'asc' ]],
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</body>
</html>
So if i leave that line commented (the line that get the datatables.min.js) i get the following erros:
dataTables.buttons.min.js:6 Uncaught TypeError: Cannot read property 'ext' of undefined
at dataTables.buttons.min.js:6
at dataTables.buttons.min.js:5
at dataTables.buttons.min.js:5
Uncaught TypeError: Cannot set property 'select' of undefined
at dataTables.select.min.js:25
at dataTables.select.min.js:15
at dataTables.select.min.js:15
jquery-3.5.1.js:4055 Uncaught TypeError: Cannot read property 'Editor' of undefined
at HTMLDocument.<anonymous> ((index):52)
at mightThrow (jquery-3.5.1.js:3762)
at process (jquery-3.5.1.js:3830)`
dataTables.buttons.min.js:6 Uncaught TypeError: Cannot read property 'ext' of undefined
at dataTables.buttons.min.js:6
at dataTables.buttons.min.js:5
at dataTables.buttons.min.js:5
If i let it on i get:
Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> ((index):43)
at mightThrow (jquery-3.5.1.js:3762)
at process (jquery-3.5.1.js:3830)
↧
Add expand feature to my angular datatable
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
↧
editor dependend with NULL option
I got editor dependent working nicely with a list of country and region codes. I now realize that we don't always have the region name to select from the list. In that case we need to add a NULL or empty --select-- option as the first item in the select list. How do we do that?
$regions = $db
->select( 'regions', ['regions.region_code as value', 'regions.region_name as label'], ['regions.country_code' => $_REQUEST['values']['roster.pob_country_code'], 'publish' => 'Yes'] )
->fetchAll();
echo json_encode( [
'options' => [
'roster.pob_region_code' => $regions
]
] );
↧
↧
Passing Custom Parameters
Hi, I need to pass additional parameters from my view to the controller (asp.net mvc5) within the datatables ajax call. In the read-only version of datatables I do this with the data part as follows :
"data": function (data) {
data.StartDate = $('#reportStartDate').val();
data.EndDate = $('#reportEndDate').val();
data.DeviceId = $('#selectedDeviceId').val();
data.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
}
I could then access these values from Request.Form in the controller method
However in the Editor version this does not seem to work, i.e. the values are not available in Request.Form
Can someone please help me out with the correct way to do this in the Editor version ? Thanks.
↧
Error after upgrading from Editor 1.9.2 to 1.9.6
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I get the following error, please advise
System.MissingMethodException
HResult=0x80131513
Message=Method not found: 'DataTables.Editor DataTables.Editor.Process(System.Web.HttpRequest)'.
Source=TBDotNet.Model
Bit of code is this:
[System.Web.Http.Route("ABC/CRUDServABC")]
[System.Web.Http.HttpGet]
[System.Web.Http.HttpPost]
public ActionResult CRUDServABC(int intContTpe, long lngContIdx, int intItemTpe, long lngItemIdx, string strItemNme, int intRemoveABC)
{
ABCUISettings lblo = new ABCUISettings();
return Json(ABCModel.CRUDServABC(intContTpe, lngContIdx, intItemTpe, lngItemIdx, strItemNme, intRemoveABC, lblo), JsonRequestBehavior.AllowGet);
}
Thanks.
↧
Reinit Problem
"DataTables warning: table id=table1 - Cannot reinitialise DataTable. "
Hey everyone,
I have several datatable ( table1) in my components. And its give me Cannot reinitialise error. Im using a lot of API for my data.
I read the https://datatables.net/manual/tech-notes/3
But i couldnt solve the how can i use a lot of same datatable in my one single page?
Thanks for your suggestions.
↧
.Net and Mysql connection string
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hi, can anyone point me to examples for the above as I can't find any. I keep getting error Unable to find the requested .Net Framework Data Provider. Many thanks.
↧
↧
Using DTE Duplicate how do I auto-update some fields like Publish in the new $ID?
Duplicate, in itself, work fine. However when I duplicate the field I need to:
{
extend: "selected",
text: 'Duplicate',
action: function ( e, dt, node, config ) {
// Start in edit mode, and then change to create
editor
.edit( table.rows( {selected: true} ).indexes(), {
title: 'Duplicate record',
buttons: 'Create from existing'
} )
.mode( 'create' );
}
},
1) Set publish to No
2) With 2 date field I need to update them the first one to now and the second to 30 days ahead. This code gets those values:
$today = date('Y-m-d');
$date_plus_30 = date('Y-m-d', strtotime("+30 days"));
If not using duplicate I do something like:
{
label: 'Date begins (this must be updated)',
name: 'date_begins',
default: '<?php echo $today; ?>',
attr: { placeholder: "Format: YYYY-MM-DD" },
},
{
label: 'Date ends (this must be updated)',
name: 'date_ends',
default: '<?php echo $date_plus_30; ?>',
attr: { placeholder: "Format: YYYY-MM-DD" },
},
However with duplicate those values get overwritten.
↧
localStorage
Hello to everyone,
I wonder if there is no usage example of localstorage usage other than Editor ? Have a nice day.
↧
Cannot set property 'id' of null in Datatable
0
hello iam using datatable i get data from ajax and foreach data then add row to my datatable, but i always got error like this create:805 Uncaught TypeError: Cannot set property 'id' of null in line code "] ).node().id = obj.id;"
for my code
$.ajax({
url : "<?php echo url('prod_bill_of_material/get-itemfg') ?>",
method : "GET",
success : function(data){
console.log(data);
// var trHTML = '';
var no = 1 ;
table_modal_itemfg.clear().draw();
var field="itemfg";
$.each(data, function( index , obj){
table_modal_itemfg.row.add( [
'<input type="hidden" readonly id="item_code_'+obj.id+'" value="'+obj.item_code+'" class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_code+'">'+obj.item_code,
'<input type="hidden" readonly id="item_name_'+obj.id+'" value="'+obj.item_name+'" class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_name+'">'+obj.item_name,
'<input type="hidden" readonly id="item_measur_'+obj.id+'" value="'+obj.item_measur+'" class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_measur+'">'+obj.item_measur,
'<input type="hidden" readonly id="item_weight_'+obj.id+'" value="'+obj.item_weight+'" class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_weight+'">'+obj.item_weight,
'<input type="hidden" readonly id="item_status_'+obj.id+'" value="'+obj.item_status+'" class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_status+'">'+obj.item_status, ~~~~
] ).node().id = obj.id;
table_modal_itemfg.draw(false);
no++;
});
}
});
↧
Need a working example of how to create an all-in-one parent/child editing view/form.
I have a number of forms that are inter-related in a parent/child method. As is I have them set up so that I visit the parent form, categories.php, for example then inline I add a render link in one of the columns that passes the id to the child and opens the child form (separate page).
It would be many times easier to visit the categories page, click/select a category row and load the child articles in a second table on the same page. Click to a different category and it loads its child articles. I found this post:
https://datatables.net/blog/2016-03-25
It meets the goal and I tried to create the forms using 2 tables articles and article_categories but found that the post is incomplete towards the ends and I could not glue it together.
The link to my demo: https://www.dottedi.xyz/bin/article-categories.php
In the post there is a reference to the following code but it does not say where it gets added:
table.row( { selected: true } ).data();
When I got to this next item and added this code in the child table that would break the page article categories page from loading data. It sticks at "loading" but never loads:
->join(
Mjoin::inst( 'users' )
->link( 'sites.id', 'users.site' )
->fields(
Field::inst( 'id' )
)
)
And yes, I updated the fields to the correct table names and field names. With that disabled I updated the server side php file adding the if/else code described here but replacing it with my table name/fields:
if ( ! isset($_POST['site']) || ! is_numeric($_POST['site']) ) {
echo json_encode( [ "data" => [] ] );
}
else {
Editor::inst( $db, 'users' )
->field(
Field::inst( 'users.first_name' ),
Field::inst( 'users.last_name' ),
Field::inst( 'users.phone' ),
Field::inst( 'users.site' )
->options( 'sites', 'id', 'name' )
->validator( 'Validate::dbValues' ),
Field::inst( 'sites.name' )
)
->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
->where( 'site', $_POST['site'] )
->process($_POST)
->json();
}
That caused the page to break. I also don't see how/where you bring the child table onto the page. The general problem is that the solution is incomplete and doesn't provide adequate help regarding where some of the code parts belong.
I made .txt copies of my php files. To see them visit:
https://www.dottedi.xyz/bin/dt/article-categories.php.txt
https://www.dottedi.xyz/bin/dt/articles.php.txt
The php/controller files:
https://www.dottedi.xyz/bin/controllers/article-categories.php.txt
https://www.dottedi.xyz/bin/controllers/articles.php.txt
I could add the text directly into this post but it would get very long. If it helps say so.
Thank you
↧
↧
Datatable is having excessive top padding
I made a web application, with a database linked in it. I used the database to display the users that have registered in the webpage (not published, thus its all made up data). I used datatables.net for the design of my table, following this videos:
https://youtu.be/s3o8iuoDMyI?list=LL
https://youtu.be/U0zYxZ6OzDM?list=LL
But I am not exactly getting the desired result in my display of my table.
Datatable now:
I am not sure why it has too much padding both in the header part and the body part's top. I did exactly what the videos did but i am unsure why its not resulting in the perfect table.
my code:
@{
ViewData["Title"] = "Admin Page";
string[] TableHeaders = new string[]
{
"First name"
,"Last name"
,"Email"
,"Phone Number"
};
Layout = "/Views/Shared/_Layout.cshtml";
}
<style>
body {
display: flex;
background: #222831;
align-items: center;
justify-content: center;
height: 100vh;
color: snow;
margin-bottom: 60px;
font-family: Kalam, cursive;
}
.table{
background:#fff;
overflow-y:auto;
box-shadow:0px 10px 50px 0px rgba(0,0,0,0.5);
border-radius:10px;
padding: 5rem;
}
table{
width:100%;
text-align:center;
border-collapse:collapse;
}
table thead th,
table tbody td{
padding:15px;
border:none;
font-weight:600;
font-size:14px;
}
table thead th{
background: #1861ac;
color:snow;
font-size:16px;
position:sticky;
top:-1%;
}
table tbody td {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
nav{
display:none !important;
}
</style>
<div class="table">
<table id="Users" class="table table-bordered table-hover table-sm">
<thead>
<tr>
@{
foreach (var head in TableHeaders)
{
<th>
@head
</th>
}
}
</tr>
</thead>
<tbody>
@{
if (Model != null)
{
foreach (var Acc in Model)
{
<tr>
<td>@Acc.Fname</td>
<td>@Acc.Lname</td>
<td>@Acc.Email</td>
<td>@Acc.PhoneNO</td>
</tr>
}
}
}
</tbody>
</table>
</div>
↧
using postEdit to update main table fails
I have editor v 1.9.6.
Within the postEdit fucntion on my server side PHP page, there is a logChange function that will save the old and new value for an audit log onto a new table, this works perfectly fine. However, I want to add an additional function to perform updates to the "Task" table depending on 2 column values. For instance,
If "TaskDefId" column = "2" and "Status" column = "complete"
it would call a new function "handleTaskStatusChange" to update the Task table to "TaskDefId" column = "8" and "Status" column = "created", however when I run this, DataTables stalls and does not update "TaskDefId" = "8". If debug the sql and parameters, everything looks correct for the update and putting in a file_put_contents() I see it reaches the function correctly. Additionally, if I comment out "executeSql" with in the "updateTaskTable" function, then it runs smoothly again. I'm assuming it's a timing or synchronization thing for why this fails to update? How can I call this update in handleTaskStatusChange function, if not in the "postEdit" to be performed? Code is below:
<?php
session_start();
// Task Workflow Handler
include("taskWorkflowHandler.php");
// DataTables PHP library
include ("../lib/datatables.inc.php");
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Join,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
$prevValues = [];
// runs only one per row
function getPrevValues( $db, $table, $id ){
global $prevValues;
$prevValues = $db->select( $table, '*', [ 'id' => $id ] )->fetch();
}
function logChange( $db, $table, $action, $id, $values) {
date_default_timezone_set('America/Chicago');
global $prevValues;
switch ($action) {
case "create":
$oldValues = [];
$newValues = $values;
break;
case "edit":
$oldValues = array_intersect_key(array_diff_assoc($prevValues,$values[$table]),array_diff_assoc($values[$table],$prevValues));
$newValues = array_intersect_key(array_diff_assoc($values[$table],$prevValues),array_diff_assoc($prevValues,$values[$table]));
break;
case "delete":
$oldValues = $prevValues;
$newValues = [];
break;
}
if (!empty($oldValues) || !empty($newValues)){
foreach($oldValues as $oKey => $oValue){
foreach($newValues as $nKey => $nValue){
if($oKey == $nKey){ // only insert if the keys match
$db->insert( 'taskaudit', array(
'user' => isset($_SESSION['user']),
'action' => $action,
'oldValue' => $oValue,
'newValue' => $nValue,
'table' => $table,
'rowId' => $id,
'column' => $oKey,
'date' => date('Y-m-d H:i:s')
));
}
}
}
if(array_key_exists('statusDefId', $newValues) && $action == 'edit'){
handleTaskStatusChange($oldValues, $newValues, $prevValues, $id);
}
}
}
// Build our Editor instance and process the data coming from _POST
$editor = Editor::inst( $db, 'task', 'id');
$tableServerFieldApplicationId = 'tableServerFields'."_".$_SESSION['applicationPageId'];
if(isset($_SESSION[$tableServerFieldApplicationId])){
foreach($_SESSION[$tableServerFieldApplicationId] as $fieldRow){
$editor->fields(Field::inst($fieldRow));
}
}
// Pre functions
// preEdit: Pre-row update event - triggered before the row / page data is updated.
$editor->on( 'preEdit', function ( $editor, $id, $values){
getPrevValues($editor->db(), $editor->table()[0], $id);
});
$editor->on( 'preRemove', function ( $editor, $id, $values){
getPrevValues($editor->db(), $editor->table()[0], $id);
});
//Post functions
// postEdit: Post-row edit event - triggered after the row / page has been updated.
$editor->on( 'postEdit', function ( $editor, $id, $values, $row ){
logChange( $editor->db(), $editor->table()[0], 'edit', $id, $values );
});
$editor->process( $_POST );
$editor->json();
// taskWorkflowHandler.php page:
$connectPdoResults = connectPdo();
function handleTaskStatusChange($oldValue, $newValue, $taskData, $taskId){
global $connectPdoResults;
$errorCode = "";
$errMsg = "";
// get taskWorkflow details
$taskWorkflowResult = getTaskWorkflow($connectPdoResults['pdo'], $taskData, $newValue['statusDefId']);
$twfRow = $taskWorkflowResult['data'];
if($taskWorkflowResult['errorCode']){
$errorCode = $taskWorkflowResult['errorCode'];
$errMsg .= $taskWorkflowResult['errMsg'];
}
// If createNewTask is 0
if($twfRow['createNewTask'] == 0){
$updateTaskResult = updateTaskTable($connectPdoResults['pdo'], $twfRow, $taskId);
if($updateTaskResult['errorCode']){
$errorCode = $updateTaskResult['errorCode'];
$errMsg .= $updateTaskResult['errMsg'];
}
}
}
function updateTaskTable($pdo, $taskworkflowData, $taskId){
$taskArgs = [];
$errorCode = "";
$errMsg = "";
$updateTaskSql = 'update prosystem_dev.task set taskDefId = ? ';
$taskArgs[] = $taskworkflowData['nextTaskDefId'];
if($taskworkflowData['nextStatusDefId']){
$updateTaskSql .= ', statusDefId = ? ';
$taskArgs[] = $taskworkflowData['nextStatusDefId'];
}
$updateTaskSql .= ' where id = ?';
$taskArgs[] = $taskId;
$updateTaskResult = executeSql($pdo, $updateTaskSql, $taskArgs);
if($updateTaskResult['errorCode']){
$errorCode = $updateTaskResult['errorCode'];
$errMsg = $updateTaskResult['errMsg'];
}
// return if errors exist
return ['errorCode'=>$errorCode, 'errMsg'=>$errMsg];
}
?>
↧
An SQL error occurred: SQLSTATE[22007]: Invalid datetime format: 1366 Incorrect integer value ...
The full error (using fictitious database account name:
The error: An SQL error occurred: SQLSTATE[22007]: Invalid datetime format: 1366 Incorrect integer value: '' for column account_table.galleries2.id at row 1
I mostly use VestaCP for my websites but sometimes must use cPanel. All my forms execute perfectly on Vesta, complex to simple. I was updating a client's site today which runs on cPanel and I am seeing the above error on most of my forms, not all. The forms, db connection, database tables are identical.
The invalid datetime format makes no sense at all because these forms do no use any date fields in the forms and none of the fields are of date or datetime type. See:
create table galleries2
(
id int auto_increment primary key,
catid int,
title varchar(80),
gallery_type varchar(12),
rowOrder int
)
I have a couple similar simple forms that are working. This is feeling like something specific to cPanel and maybe even mysql or mysql configuration. Suggestions?
↧
Get Filtered Data to controller
My Remit has changed and I need to be able to get the filtered data ie the data only searched and return to user to a MVC controller in asp.net is their a function like rows.data that would retain the pre existing data on the filtered level.
↧
↧
The pagination's Next button doesn't disable
I made a paged table that brings me a certain amount of data and as I advance it brings me more through a server side process but the Next button does not work.
↧
How do you set up a last updated function?
After editing a form I need to have it automatically update a field, last_updated, to the datetime like php now as you click to save. How do you do this?
↧
Break the column by delimiter to distribute the values among rows.
There are 2 columns in a row for my table. One is the key and other is the value.
The value can be single or multiple. If multiple, they are separated by <br>. Like:
K1 -> V1 <br> V2 <br> V3
Now I want to export this into an Excel file such that there will be a single row for each value. Like:
K1 -> V1
K1 -> V2
K1 -> V3
I want to do this using datatables but cannot find any success. Can anyone help plz.
↧