Hi everyone,
I need help regarding the responsive class. I have put the class responsive on my table . The problem is that it works properly on chrome, firefox and safari. The only thing that I am having a problem is that the view of the datatable on min-width in ie is different from the other browsers. Please I badly need Help. Thank you so much guys in advance
Hi everyone,
I need help regarding the responsive class. I have put the class responsive on my table . The problem is that it works properly on chrome, firefox and safari. The only thing that I am having a problem is that the view of the datatable on min-width in ie is different from the other browsers. Please I badly need Help. Thank you so much guys in advance !.
One the photo, the left photo is the view of datatables in min-width in chrome, firefox and safari. Right photo is the view of datatables in min-width in ie.
How would you put a tooltip on mutiple buttons within a cell where the buttons are being generated server-side. I tried to put the tooltip on the server-side with no luck, because of the problem that server-side takes away functionality of the tooltip.
Is it possible to rename a file based on an editor input field before uploading it? I was thinking of using the custom upload action like below.
I want to upload a file (with any name) and rename it using another field from the editor before it is stored in its final location.
Field::inst( 'transtest.SerialNo' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'A serial number is required' ) ) ),
Field::inst( 'images.name' )
->upload(
Upload::inst( function ( $file, $id ) {
$SystemPath = '\\\\SHARES\\IMAGES\\GIS\\Pictures\\';
$WebPath = 'http://appsserv/app/power/pictures/';
$extension = '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
-->
$NewName = (the transtest.SerialNo from above);
-->
move_uploaded_file( $file['tmp_name'], $SystemPath.$NewName.$extension);
return $id
} )
->db( 'images', 'name', array(
'images.name' => Upload::DB_FILE_NAME,
'images.size' => Upload::DB_FILE_SIZE,
) )
->validator( Validate::fileSize( 5000000, 'Files must be smaller that 5 MB' ) )
->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
)
->leftJoin( 'images', 'transtest.image', '=', 'images.name' )
Is there a way to access the transtest.SerialNo field in order to rename the uploaded file using it?
I attempted this route:
https://datatables.net/forums/discussion/44969/editor-upload-file-exists-confirm-overwrite-prompt
the solution all the way at the bottom...but I couldnt get the writeCreate or writeEdit to fire. I verified the custom upload was writing to the db but they would not fire.
Hi everyone,
I am using cdn datatables and I am receiving an error. The error message says
"Uncaught Error: Cannot perform DeepCopy() because a circular reference was encountered, object: [object Object], property: 0"
The process is I am getting the data in a sharepoint online through json.
Any reply would be so much appreciated.
Thanks
-caloy
My requirement is select a row and delete it by clicking on DELETE button. My table has first 4 columns as fixed. When i click on any cells on the fixed column the row gets selected but the " $(this).toggleClass('selected'); " value is set to 0 instead of 1. The fixed cells alone returns inverse value for row select. Please find my sample code
$('#example tbody').on( 'click', 'tr', function () {
var _table = $('#example').DataTable();
var _delbtn = _table.button(6);
$(this).toggleClass('selected');
if ( _table.rows('.selected').data().length === 0 ) {
_delbtn.disable();
}
else {
_delbtn.enable();
}
} );
I tried setting select property to true for fixed columns but nothing changed.
"fixedColumns" : {
"leftColumns" : 4,
"select": true
}
Please help me out on this.
Hi there,
I want to always show the first column. In case the width exceeds the mobile breakpoint I want show all other columns. The last column should have higher priority.
I thought, that I can accomplish this with columns.classname = all, min-tablet etc.
It correctly shows only the "all" column in mobile, but shows all others in tablet view. The responsiveness breaks. Columns no longer are hidden, when they do not fit.
Is there any way to keep the responsiveness?
The min-tablet class forces columns to be visible, even if they don't fit.
Here is a codepen:
https://codepen.io/wiwo/pen/vVoPpX
Hi,
I am trying to update a row in a datatable.
The button in the row opens a bootstrap modal, loads content from the server.
The content is actualy a javascript code, which should update the row, simply running this:
table.row(rowId).data(data).invalidate();
rowId and data is OK.
I think there is something with the button. As I would like to update the row that contains it.
Any help is much appreciated.
Thanks,
Mark
Hi,
I am considering purchesing Editor, for its inline editing features, however I am wondering if it will solve my problem.
Basicly i have a table, which lenght is determined by the returned data.
Based on the specific case. we can have table for one or multiple years.
Columns for example are like :
Name, Year, Jan, Feb, Mar, Apr ....... Year, Jan, Feb, Mar, Apr ....
So basicly i create columns based on the year count, and then fill it with grouped values using data from a model. I haven't found a way to fill table from dt ajax call.
I need to be able to edit each month values (best if it can be done inline).
From the editor examples i have seen, all table configuration is specefied in the js part. So i am not sure if the inline functionality will work for me.
Can someone advise me if this requirment can be achived with Editor pluign ?
inline editing for month values
<table id="TempTable"class="display row-border" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>type></th>
@foreach (var Year in Model.Years)
{
<th>Jan-@Year</th>
<th>Feb-@Year</th>
<th>Mar-@Year</th>
<th>Apr-@Year</th>
<th>May-@Year</th>
<th>Jul-@Year</th>
<th>Jun-@Year</th>
<th>Aug-@Year</th>
<th>Sep-@Year</th>
<th>Oct-@Year</th>
<th>Nov-@Year</th>
<th>Dec-@Year</th>
}
</tr>
</thead>
<tbody>
@foreach (var item in Model.Data)
{
<tr>
<td>@item.[0].Values.Name</td>
<td>@item.[0].Values.Type</td>
@foreach (var item2 in item.Values)
{
<td>@item2.Jan</td>
<td>@item2.Feb</td>
<td>@item2.Mar</td>
<td>@item2.Apr</td>
<td>@item2.May</td>
<td>@item2.July</td>
<td>@item2.June</td>
<td>@item2.Aug</td>
<td>@item2.Sep</td>
<td>@item2.Oct</td>
<td>@item2.Nov</td>
<td>@item2.Dec</td>
}
</tr>
}
</tbody>
</table>
$(document).ready(function () {
$('#TempTable').DataTable({
"dom": 'rti'
});
Since I upgraded to 1.8.0 version there's something strange in the query results. It seems that the split of the fields is not happening correctly when you pass a string param to the get function.
I fixed restoring the preg_split function in the code (like it was in the previous version).
/* 1.8.0 */
$this->_field[] = trim( $get );"
/* Previous version */
$fields = preg_split( "/,(?![^()]*+\\))/", $args[$i] );
for ( $j=0 ; $j<count($fields) ; $j++ ) {
$this->_field[] = trim( $fields[$j] );
}
I am not sure this is the right way or not but this is what I am trying to accomplish - validate data in rowCallBack.
let says col_a is TotalCount, col_b is Length, col_c is Width, Col_d is Height and Col_e is for 'edit/delete' functions.
In rowCallBack function:
i check totalCount (sum of col_a) > 28 and then it throws error to row, col_a.
I check col_b, col_c, col_d to make sure they are all have values. If one of them is empty then it throws error to the column that is empty.
I tried to trigger click on 'edit/delete', but it doesn't work (row.cells[4].firstChild.click();).
Any suggestion?
rowCallback: function (row, data) {
var totalCount = 0;
$("#PalletDetails_CountList").val($(pltTable).DataTable().column(1).data().join(vm));
$("#PalletDetails_LengthList").val($(pltTable).DataTable().column(2).data().join(vm));
$("#PalletDetails_WidthList").val($(pltTable).DataTable().column(3).data().join(vm));
$("#PalletDetails_HeightList").val($(pltTable).DataTable().column(4).data().join(vm));
$.each($(pltTable).DataTable().column(1).data(), function (index, value) {
totalCount = parseInt(totalCount) + parseInt(value);
});
if (totalCount > 28) {
row.cells[0].error = "Count must be less then 29";
row.cells[4].firstChild.click();
};
if (!(data.pltLength == '' && data.pltWidth == '' && data.pltHeight == '')) {
if (data.pltWidth == '') {
row.cells[2].error = "Width is required";
// click on edit a.editor_edit
row.cells[4].firstChild.click();
}
if (data.pltLength == '') {
row.cells[1].error = "Length is required";
row.cells[4].firstChild.click();
}
if (data.pltHeight == '') {
row.cells[3].error = "Height is required";
row.cells[4].firstChild.click();
}
}
},
Is it possible to rename a file based on an editor input field before uploading it? I was thinking of using the custom upload action like below.
I want to upload a file (with any name) and rename it using another field from the editor before it is stored in its final location.
Field::inst( 'transtest.SerialNo' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'A serial number is required' ) ) ),
Field::inst( 'images.name' )
->upload(
Upload::inst( function ( $file, $id ) {
$SystemPath = '\\\\SHARES\\IMAGES\\GIS\\Pictures\\';
$WebPath = 'http://appsserv/app/power/pictures/';
$extension = '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
-->
$NewName = (the transtest.SerialNo from above);
-->
move_uploaded_file( $file['tmp_name'], $SystemPath.$NewName.$extension);
return $id
} )
->db( 'images', 'name', array(
'images.name' => Upload::DB_FILE_NAME,
'images.size' => Upload::DB_FILE_SIZE,
) )
->validator( Validate::fileSize( 5000000, 'Files must be smaller that 5 MB' ) )
->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
)
->leftJoin( 'images', 'transtest.image', '=', 'images.name' )
Is there a way to access the transtest.SerialNo field in order to rename the uploaded file using it?
I attempted this route:
https://datatables.net/forums/discussion/44969/editor-upload-file-exists-confirm-overwrite-prompt
the solution all the way at the bottom...but I couldnt get the writeCreate or writeEdit to fire. I verified the custom upload was writing to the db but they would not fire.
I have implemented DataTables Editor and integrated it with the Select extension. If a user selects a row at the bottom of a result set, clicks the edit button, and submits the changes, DataTables reloads the data and returns the scrolling back to the top. I was able to use Scroller for inline editing to keep scroll position but not with the Edit modal. Is there a way to keep position of the scroll after editing in the pop up modal?
I have successfully integrated Datatables, Editor and numerous plugins to achieve my desired outcome, thanks Allan and the team for this amazing piece of code!
Here is my problem, I hope you can point me in the right direction to mitigate this dilemma.
Using the jQuery UI AutoComplete and KeyTable in the same editor instance presents a problem when selecting from the autocomplete drop-down menu.
Example,
The column has the following drop-down menu options when I start typing, [ "apple", "arnold", "bed" ]
If I type in "a", "apple" and "arnold" render in the drop-down. Pressing arrow key down to select arnold (second choice) causes the focus of the cell to jump to next row below w/ corresponding cell from above.
KeyTable navigation like style needs to be disabled somewhere within jQuery UI Autocomplete function while rendering the drop-down menu and re-enabled after pressing tab.
I know it's possible to achieve this with the following code.
$("datatable").DataTable().keys.disable();
and to re-enable
$("datatable").DataTable().keys.enable();
This is my AutoComplete initialization in the Editor for the column.
{label: "Dating", name: "dating", type: "autoComplete",
opts: {
autoFocus: true,
source: [ "apple", "arnold", "bed" ],
delay: 0,
select: function(event, ui) { if(event.keycode == 9) {}
}
}},
KeyTable Initialization using DataTable
'keys' => [
'columns' => [ 1,2,3,4,5,6,7 ],
'editor' => 'editor',
'editOnFocus' => true,
'className' => 'highlight'
],
Thanks!
PS. I will soon make a live demo available to everyone.
I have an issue when i try to edit the fields of the tables im joining dont update, but if i modify the fields of the table im not joining it update correctly, dont know what im missing
Image cant be exported in Excel and CSV?
Is this possible?
I am using the DataTables, trying to use the sort and search functions with input elements. I have managed the sorting to work for all elements but I am struggling to get the search function to work.
I have tried following the example available on DataTables and suggestion in JQuery Datatables search within input and select and it seems to be working for the most part, but I am unable to search for some items, for example, I have a product called "Bread Buns (Case / 48)". If I search for "Bread", nothing happens, not even showing "no results", the table doesn't refresh. But if I try "Buns" or "Case / 48", I get the result. The same thing happens with a couple of other items and there is no logic to it AT ALL.
My code for the script is as follows:
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val();
} );
}
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val() * 1;
} );
}
$.fn.dataTable.ext.order['dom-drop'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('select', td).val();
} );
}
$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
return $(value).val();
};
$(document).ready(function() {
$('#tbl_store_product_sizes').DataTable( {
"columnDefs": [
{ "targets": 1, "orderDataType": "dom-text", "type": "string" },
{ "targets": 2, "orderDataType": "dom-drop", "type": "string" },
{ "targets": 3, "orderDataType": "dom-text-numeric" },
{ "targets": 4, "orderDataType": "dom-text-numeric" },
{ "targets": 5, "orderDataType": "dom-text-numeric" },
{ "type": "html-input", "targets": [1, 2, 3, 4, 5] }
],
"order": [[ 5, "desc" ]]
});
} );
I don't understand why the search works in some cases, but not others? I inspected the page and the value for those TDs doesn't have any weird characters or anything like that.
I also can't find anything on how to be able to make the dropdown searchable so a suggestion on that would be greatly appreciated.
My code for the actual table:
<table style=' height:10px; margin-left:-10px' id="tbl_store_product_sizes" class="table table-fixed table-striped table-bordered datalist" cellspacing="0">
<thead>
<tr >
<th style='width:10%;'> No. </th>
<th style='width:40%;'> Product Name </th>
<th style='width:20%;'> Department Name </th>
<th style='width:10%;'> Unit Cost </th>
<th style='width:10%;'> Quantity Counted </th>
<th style='width:10%;'> Total Cost </th>
</tr>
</thead>
<tbody>
<?php
$query = "select id from view_stocktake_master where store_id = '$store_id' order by stock_date desc limit 1";
//echo $query;
$retval = f_select_query($query, $datarows);
$stocktake_id = f_htmlspecialchars_decode($datarows[0]->id , ENT_QUOTES);
$query = "";
$rows = "";
$rowcount = 0;
$retval = 0;
$query = "select sp.product_id AS product_id, sp.department_id AS department_id, sp.product_name AS product_name, sd.department_name AS department_name, sp.unit_cost AS unit_cost, SUM(sp.quantity_units) AS quantity_counted, ROUND(SUM(sp.quantity_units) * sp.unit_cost,2) AS total_cost from stocktake_details sp INNER JOIN store_departments sd ON sd.id = sp.department_id where sp.stocktake_id = $stocktake_id GROUP BY sp.product_id ORDER BY total_cost DESC";
//echo $query;
$retval = f_select_query($query, $datarows);
if ($retval == -1 )
{
$connected = false;
return -1;
}
$department_id_dropdown = f_get_dropdown("department_name", "department_name", "store_departments", '', "department_id", " store_id = $store_id", '', '', '', false, false, true);
$rowcount = count($datarows);
for ($counter = 0; $counter< $rowcount; $counter++)
{
$lint_product_id = f_htmlspecialchars_decode($datarows[$counter]->product_id , ENT_QUOTES);
$lstr_product_name = truncate(f_htmlspecialchars_decode($datarows[$counter]->product_name , ENT_QUOTES), 150);
$lstr_department_name = truncate(f_htmlspecialchars_decode($datarows[$counter]->department_name , ENT_QUOTES), 150);
$lint_department_id = f_htmlspecialchars_decode($datarows[$counter]->department_id , ENT_QUOTES);
$lint_department_id = intval($lint_department_id);
$lint_unit_cost = f_htmlspecialchars_decode($datarows[$counter]->unit_cost , ENT_QUOTES);
$lint_unit_cost = floatval($lint_unit_cost);
$lint_unit_cost = number_format($lint_unit_cost, 2);
$lint_quantity_counted = f_htmlspecialchars_decode($datarows[$counter]->quantity_counted , ENT_QUOTES);
$lint_quantity_counted = floatval($lint_quantity_counted);
$lint_quantity_counted = number_format($lint_quantity_counted, 2);
$lint_total_cost = f_htmlspecialchars_decode($datarows[$counter]->total_cost , ENT_QUOTES);
$lint_total_cost = floatval($lint_total_cost);
$lint_total_cost = number_format($lint_total_cost, 2);
$department_id_dropdown = f_get_dropdown("department_name", "department_name", "store_departments", $lstr_department_name, "department_id", " store_id = $store_id", '', '', '', false, false, true);
$row_counter = intval($counter) + 1;
if ($lint_quantity_counted == 0)
{
echo "<tr>";
echo "<td style='color:red; width:10%;' > $row_counter </td>";
echo "<td><input type='text' name='product_name' class='form-control product_name' style='width:80%;' value='$lstr_product_name' /></td>";
echo "<td class='text-right' style='width:20%;'> $department_id_dropdown </td>";
echo "<td style='color:red;' > <input type='text' name='unit_cost' class='form-control unit_cost' style='width:80%;' value='$lint_unit_cost' /> <input name='product_id' class='form-control product_id' value='$lint_product_id' type='hidden'/> </td>";
echo "<td style='color:red;' > <input type='text' tabindex='-1' readonly name='quantity_counted' class='form-control editable_control number_format unit_cost' style='width:80%;' value='$lint_quantity_counted' /> </td>";
echo "<td style='color:red;' > <input type='text' tabindex='-1' readonly name='total_cost' class='form-control editable_control number_format unit_cost' style='width:80%;' value='$lint_total_cost' /> </td>";
echo "</tr>";
}
else {
echo "<tr> ";
echo "<td style='width:10%;'> $row_counter </td>";
echo "<td><input type='text' name='product_name' class='form-control product_name' style='width:80%;' value='$lstr_product_name' /></td>";
echo "<td class='text-right' style='width:20%;'> $department_id_dropdown </td>";
echo "<td> <input type='text' name='unit_cost' class='form-control unit_cost' style='width:80%;' value='$lint_unit_cost' /> <input name='product_id' class='form-control product_id' value='$lint_product_id' type='hidden'/> </td>";
echo "<td> <input type='text' tabindex='-1' readonly name='quantity_counted' class='form-control editable_control number_format unit_cost' style='width:80%;' value='$lint_quantity_counted' /> </td>";
echo "<td> <input type='text' tabindex='-1' readonly name='total_cost' class='form-control editable_control number_format unit_cost' style='width:80%;' value='$lint_total_cost' /> </td>";
echo "</tr>";
}
}
?>
</tbody>
</table>
I know it's quite a lot of code, but I wanted to show everything to make sure I am not missing something simple.
I am using jquery 3.2.1 and have a datatable which populates data on page load. After the user edits a row, I am using datatable.ajax.reload() method to reload the datatable without losing the column sort. This works fine in chrome but in IE the behavior is wierd. It reloads the data, but after the reload it automatically refreshes the entire page again.
This is causing the sorting to be reverted again, calls are made again. Can anyone please let me know how to resolve this issue ?
Here are two images of the datable showing full in one but not full in the other. This was never an issue before I made some changes recently, just adding a button and now i have this issue. I would like it to show all columns without having to scroll. Any help is welcomed, thanks for your response.
$(document).ready(function() {
$('#table_id').DataTable();
} );
export default {
data() {
return {
editmode: false,
listProjects : {},
}
},
methods: {
loadProjects(){
axios.get("projects").then(({ data }) => (this.listProjects = data.data));
},
},
created() {
this.loadProjects();
},
mounted() {
console.log('Component mounted.')
}
}
===================
the data is displayed but the first row shows the message "No data available in table",, how do I solve this problem.???
