Hi,
I was succefully able to add Child Rows using this link
https://datatables.net/blog/2014-10-02
I have added a nested table and would like to export all the new added children using Export function
What I noticed is formatted child rows do not get Exported.
How do we export child rows?
Thanks in advance.
I'm trying to create colspan headers like the one shown in this example https://datatables.net/examples/basic_init/complex_header.html, but I want to do this programmatically using the DataTable initialization or API.
In my example below, I'm dynamically generating the column definitions directly from the json so I can avoid manually creating an html table in this same file. The code below works (although in real life the "my_data" value will come from an separate ajax call) but I can't figure out how to generate colspan. How can I programmatically generate the "HR Information" and "Contact" colspan items like https://datatables.net/examples/basic_init/complex_header.html,?
var my_data =
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": 5421
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "5300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
},
];
var my_columns = [];
function fillCols(dataSet) {
var x = dataSet[0];
$.each( x, function( key, value ) {
var my_item = {};
my_item.data = key;
my_item.title = key;
my_columns.push(my_item);
});
};
$(document).ready(function() {
fillCols(my_data)
$('#example').DataTable( {
data : my_data,
columns: my_columns
} );
} );
</script>
<table id="example" class="display" style="width:100%">
</table>
</html>
, endRender: function (rows, group)
{
var tQty = rows
.data()
.pluck(3)
.reduce(function (a, b) {
return a + b.replace(/[^\d]/g, '') * 1;
}, 0) ;
var tAcc = rows
.data()
.pluck(4)
.reduce(function (a, b) {
return a + b * 1;
}, 0) ;
var tRej = rows
.data()
.pluck(5)
.reduce(function (a, b) {
return a + b * 1;
}, 0);
var tDiff = rows
.data()
.pluck(6)
.reduce(function (a, b) {
return a + b * 1;
}, 0);
var tYield = 0;
if (tAcc != 0 && tRej != 0 && tDiff != 0 )
{
tYield = tAcc / (tAcc + tRej + tDiff ) * 100;
tYield = $.fn.dataTable.render.number('', '.', 2, '').display(tYield);
}
return $('<tr/>')
.append('<td colspan="3" align="center" >' + group + '-TOTAL: ' + '</td>')
.append('<td align="right">' + tQty + '</td>')
.append('<td align="right">' + tAcc + '</td>')
.append('<td align="right">' + tRej + '</td>')
.append('<td align="right">' + tDiff + '</td>')
.append('<td align="right">' + tYield + '</td>')
}
, dataSrc: [1]
I want to calculate running totals or say some calculations based on grouped rows . i.e first row of the current group and last row of the current group.. how to do it?
I did it according to the instructions and got an example on my website:
https://sl19374928zzaljekswdf.vibory.pro/editor01/examples/simple/simple.html
But I would like to do this in a Joomla CMS. To make it work in a separate module.
columns: [
{data: 'operations.Libelle' },
{data: 'lots.Numero' },
{
data: null,
render: function ( data, type, row ) {
return ((data.PresCiv.Libelle)?data.PresCiv.Libelle+' ':'')+data.prescripteurs.Nom+' '+data.prescripteurs.Prenom;
}
},
{
data: null,
render: function ( data, type, row ) {
return ((data.ProsCiv.Libelle) ? data.ProsCiv.Libelle+' ':'')+data.options.Nom+' '+data.options.Prenom;
}
,editField: ['options.Nom', 'options.Prenom']
},
{data: 'options.Date'}
],
order: [[ 6, 'desc' ], [ 5, 'desc' ]],
columnDefs: [{target: [4,5,6,7]}],
....
initComplete:
function () {
if (savedSelected) {
this.api().rows(savedSelected).select();
this.api().state.save();
}
this.api().columns([0,1,2,3]).every( function () {// afficher les listbox de filtrage pour les colonnes concernées
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
column.data().unique().sort().each( function ( d, j ) {
var t = '<option ';
if ( (d) ){
if (savedColumnsFilters){
if (savedColumnsFilters[column[0][0]].search.search == '^'+d+'$'){
t += "selected='selected' ";
}
}
select.append( t + 'value="'+d+'">'+d+'</option>' );
}
});
});
}
Hi
I wonder, dose any one now when we export to excel, how we can create a empty pivot that we export to excel?
I have attached images what I mean.
Kinde Regards Sam
Demo: https://jsfiddle.net/friek2k/fjwjfuxL/
In this demo, on first load, columnText appropriately renders the supplied html as html. However, if you try re-ordering the columns, then opening the columns dropdown again, the buttons are echoed as text - i.e. the html isn't rendered.
Any suggestions on how to remediate?
Thanks a lot
is it possible to do this when the table is initialized, or can this be done only with the help of the css? Tell me an example code.
Hi,
I would like to report that State saving doesn't work with Scroller. After the page refresh Scroller cannot find proper position and stays at the beginning of table.
Steps to reproduce:
1. scroll or scroll-jump to some position in table
2. refresh the page
3. table is blank and scroller at the beginning
You can test it out even at the example page:
https://datatables.net/extensions/scroller/examples/initialisation/state_saving.html
I tried to do some debugging but with no luck. Anyway I found out that state restoring is not triggered because of condition failing: this.s.dt.oLoadedState.iScroller is always undefined.(see image). Maybe it will help.
I've been searching these forums but can't seem to find an answer that work for me. I've got the paid version of editor and the code on my table looks like below. I'm trying to get Autofill to work - it shows the blue corner block, I can drag it, but it doesn't update anything and I get the console error Uncaught TypeError: this.node is not a function.
I've seen this error was mentioned in the forums, but nothing seems to help. I've just downloaded the latest package so think everything is up to date.
I hope someone can help.
Thank you!
<table id="prices-table" class="order-column row-border nowrap">
<thead>
<tr style="font-size: 14px;">
<th>Valid From</th>
<th>Valid To</th>
<th>Price Name</th>
<th>Price Per</th>
@if($product->category->slug == 'accommodation')
<th>Board</th>
@endif
<th>Currency</th>
<th>Amount</th>
{{-- <th class="text-right">Order</th> --}}
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: '{!! route('app.prices') !!}',
table: '#prices-table',
idSrc: 'id',
fields: [ {
label: 'Valid From:',
name: 'valid_from',
type: 'datetime',
format: 'YYYY-MM-DD',
}, {
label: 'Valid To:',
name: 'valid_to',
type: 'datetime',
format: 'YYYY-MM-DD',
}, {
label: 'Name:',
name: 'name'
}, {
label: 'Unit:',
name: 'unit_id',
type: 'select',
options: {'one': 1, 'two': 2, 'three': 3}
}, {
@if($product->category->slug == 'accommodation')
label: 'Board Type:',
name: 'board_type_id'
}, { @endif
label: 'Currency:',
name: 'currency',
}, {
label: 'Amount:',
name: 'amount'
}
],
});
// Activate an inline edit on click of a table cell
$('#prices-table').on( 'click', 'tbody td', function (e) {
editor.inline( this, {
submitOnBlur: true
});
});
var table = $('#prices-table').DataTable({
dom: 'Bfrtip',
processing: false,
serverSide: false,
fixedHeader: {
header: true,
},
paging: false,
ajax: '{!! route('app.prices.index', ['product_id' => $product->id]) !!}',
select: true,
colReorder: true,
rowId: 'id',
columns: [
{
data: 'valid_from',
className: 'dt-body-center',
render: function (data, type, row) {
return data.substring(0, 10);
},
},
{
data: 'valid_to',
className: 'dt-body-center',
render: function (data, type, row) {
return data.substring(0, 10);
},
},
{
data: 'name',
},
{
data: 'unit_id',
className: 'dt-body-center',
},
@if($product->category->slug == 'accommodation')
{
data: 'board_type_id',
className: 'dt-body-center',
},
@endif
{
data: 'currency',
className: 'dt-body-center',
},
{
data: 'amount',
className: 'dt-body-right',
render: $.fn.dataTable.render.number(',', '.', 0),
},
],
// editor...
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor },
],
// keys: {
// editor: editor,
// },
autoFill: {
horizontal: false,
vertical: true,
columns: '', // = all
editor: editor,
},
});
}); // document.ready
</script>
<style type="text/css">
#prices-table {
font-size: 14px;
}
</style>
So I'm using scroller with a very large table (>30000 rows) with server side processing.
If I'm in the middle of the table somewhere, and click the reload icon in the browser, It will re-draw the table, and load the data from the position I was before the redraw, as expected.
The problem is that the scrollbar stays at the top, so you cannot see the data that was just loaded as it's way down in the table somewhere. if I click the down arrow at the bottom of the scrollbar, it then loads the next batch of data from the server, and draws it at the top of the table, so now you can see the data, but cannot scroll up, as it's close to the top of the table.
This seems to be a new issue, as it didn't occur until we upgraded to version 2.0.1
The site is behind a firewall, so I can't attach a link.
I tried to use the debugger to upload the configuration information to you, but it appears i'm getting a 500 response from your server.
Thanks,
Jeff
Hi datatable sayme this DataTables warning: table id=DataTables_Table_1 - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1 when i charge this data
public function mostrarTablaAreas()
{
$item = null;
$valor = null;
$areas = ControladorArea::ctrMostrarArea($item, $valor);
if (count($areas) == 0) {
echo '{"data"}: []}';
return;
}
$datosJson = '{
"data": [';
for ($i = 0; $i < count($areas); $i++) {
$botones = "<div class='btn-group'><button class='btn btn-warning btn-sm btnEditarArea' idArea='" . $areas[$i]["ID_Area"] . "' data-toggle='modal' data-target='#modalEditarArea'><i class='fas fa-pencil-alt text-white'></i></button><button class='btn btn-danger btn-sm btnEliminarArea' idArea='" . $areas[$i]["ID_Area"] . "'><i class='far fa-trash-alt'></i></button></div>";
$datosJson .= '[
"' . $areas[$i]["ID_Area"] . '",
"' . $areas[$i]["nombreArea"] . '",
"' . $botones . '"
],';
}
$datosJson = substr($datosJson, 0, -1);
$datosJson .= ']
}';
echo $datosJson;
}
Correctly table should say no data available but i have that error pls help me
Hello, im using codeigniter and php to create this table.
im using collapse from bootstrap to view childrow like datatable can do. but i dont understand to use js, so im using only php here. the childrow is a new row with only 1 td, and that causing error
is there any solution to make childrow using only php?
from what i know, if you want to merge cells in php you only create 1 td with colspan=12, but datatable not allowing that..
here is when im creating the td with no value
here is when im deleting the td and causing errors
and the attachment file is the code that i wrote
Hi,
I've search and the forum quite a bit and could not find out how to display a url contains & characters, they seems to be encoded all the time but need help to display it as they are.
I've tried with entityDecode and escape() but no luck.
Here is a minimal example if someone know the solution.
https://jsfiddle.net/zdn8tmvx/
The url to display inside the cell is:
function view(){
var dataTable = $('#example').DataTable(
{
processing: true,
serverSide: true,
"deferRender": true,
"orderable": true,
"searchable": true,
"ajax":
{
"url": "index.htm",
"type": 'POST',
"data": function ( d )
{
var JSONData = JSON.parse(d);
console.log(JSONData);
// fnCallback(d);
}
},
"columns": [
{"data": "Name"},
{"data": "Email"},
{"data": "Contact"}
]
});
}
Hello,
I would like to report that table with Scroller becomes empty after updating rows (adding, deleting, updating data) and table redrawing. Also appears empty space in the table when resizing.
Steps to reproduce error with redrawing table:
1. Scroll to the bottom of the table.
2. Wait a while until the data disappears from the table.
Steps to reproduce error with resizing
1. Scroll to the bottom of the table.
2. Pull the bottom border of the window up.
3. Pull the bottom border of the window down.
4. Repeat several times until the part of the table below is empty.
You can test it:
http://live.datatables.net/qixumapu/1/edit
I have created a .NET PostCreate event that needs to be fired after a new user is created in my web app. I use the AspNet.Identity UserManager to handle sending out confirmation / change password email after the account is created inside the postCreate event. I am also setting some user roles, so I need to keep Transactions on. The issue is that the PostCreate event is fired before the Transaction is committed to the database. So when the UserManager is called to lookup the user, the user hasn't been saved to the database yet (transaction not committed). Ideally, the postcreate event wouldn't fire until the transaction has been committed. Is there a work around for this?
Dear all,
we have a DT and DT Editor in place. The content of the DT is dynamically updated subject to a selection made in a dropdown box (price list number - itpl_id). We use myTable.ajax.url(ajax_url + "&itpl_id=" + itpl_id).load(); for that.
Unfortunately there seems to be no documented api method in order to do the same with the DT editor ajax url. This means when we update a line for a pricelist id (itpl_id) other than the one we have created the myEditor object, it will disappear until we reselect a new itpl_id from the dropdown menu in order to update myTable.
Is there any (hidden) method we can use in order to modify the DT Editor ajax url? Thanks for your help in advance!
Kind regards,
Oliver
Hello,
I have DataTable with external button (Search) to Filter Data, It works Fine with First Time Load / Page Load (refer 1 Time Click.PNG)
I need to Filter Table with multiple criteria so added a search button on the same page and Called reload Fuction
I search click it re-loads Data correctly but Grid click event doesn't works after search button click
how to resolve this?
Please suggest ,
Thanks
**ASP.NET PAGE **
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanelSalesOrder" runat="server">
<ContentTemplate>
<div class="row no-gutters">
<div class="col-sm-3">
<select class="custom-select custom-select-sm" runat="server" id="txtCategory">
</select>
</div>
<div class="col-sm-3">
<asp:Button ID="btnSearch" runat="server" Text="Search" CausesValidation="False"
CssClass="btn btn-secondary btn-sm btn-block" OnClick="btnSearch_Click" />
</div>
<div class="col-sm-6">
</div>
</div>
<table id="tblOrder" class="table-striped table-bordered table-hover table-sm" style="width: 100%">
<thead>
<tr style="height: 35px">
<th>Ord.No</th>
<th>Date</th>
<th>Product Name</th>
</tr>
</thead>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="theScript" runat="server">
<script type="text/javascript">
$(document).ready(function () {
fill_table();
$('table tbody').on('click', 'tr', function () {
alert("Data Table clicked");
});
});
function fill_table()
{
var table = $('#tblOrder').DataTable(
{
'bPaginate': true,
'bLengthChange': false,
'bFilter': false,
'bInfo': true,
'bAutoWidth': false,
'responsive': false,
"scrollX": true,
'ajax': {
url: "SalesOrderIssue.aspx/get_PendingOrder",
method: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
dataSrc: function (data) {
return $.parseJSON(data.d)
}
},
'columns': [
{ data: "ORDER_NO" },
{ data: "ORDER_DATE", type: "date", render: function (data) { return moment(data).format("MM/DD/YYYY"); } },
{ data: "ProductMaster.PRODUCT_NAME" },
{ data: "SizeMaster.SIZE_NAME" },
],
'order': [[1, 'asc']],
'error': function (xhr, status, error) {
alert('Error Occured -' + error);
}
})
}
``` function reload_data() {
fill_table();```
}
</script>
</asp:Content>
Code Behind
[WebMethod]
public static string get_PendingOrder()
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
string strOrderList = serializer.Serialize(_listOrderMasterDTO);
return strOrderList;
}
private void fill_PendingOrder()
{
try
{
var ActiveDate = DateTime.Now;
var startOfMonth = new DateTime(ActiveDate.Year, ActiveDate.Month, 1);
DateTime dtFromDate = Functions.ConvertToDateTime(m_strStartDate);
DateTime dtToDate = Functions.ConvertToDateTime(m_strEndDate);
_listOrderMasterDTO = new OrderMasterService().GetOrderMasterByDateAndSubCatIdList(dtFromDate, dtToDate, "", 0, Convert.ToString(txtCategory.Items[txtCategory.SelectedIndex].Text), Convert.ToString(Session["g_DBNAME"]));
}
catch (Exception ex)
{
Module.ShowError(ex, this, this.Page.GetType());
}
}
protected void btnSearch_Click(object sender, EventArgs e)
{
try
{
fill_PendingOrder();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("$(function(){");
sb.Append("reload_data();");
sb.Append("});");
ScriptManager.RegisterStartupScript(this, this.Page.GetType(), "", sb.ToString(), true);
}
catch (Exception ex)
{
Module.ShowError(ex, this, this.Page.GetType());
}
}
$this->datatables->add_column('view',
'<a href="javascript:void(0);" class="edit_record btn btn-info btn-xs" data-kode=$1 data-nama=$10