The datatables.min.js is "causing" hyperlinks to not work across the page (when clicked, nothing happens). I've only been able to narrow it down to this by commenting out the call to that script and then hyperlinks begin to work correctly.
I highly doubt it is actually the datatables that is in conflict, but wondering if anyone has experienced something similar and if I could be pointed in a direction.
Thanks!
I'm trying to include a Datatable in a Meteor app, but getting this error:
Uncaught TypeError: $(...).DataTable is not a function(…)
Inside my client/ folder, in the main.html file, I have this minimal code:
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
</head>
<body>
<table id="tableId"></table>
<script>
$(document).ready(function () {
$('#tableId').DataTable();
});
</script>
</body>
Here's a demo of my problem
PS - when I run the HTML file itself (without Meteor), I don't get this error. So, is it something wrong between Datatable and Meteor, or am I missing something here?
Dear Allan,
if I use this markup the editor button works perfectly
var otable = $('#dt_Table').DataTable({
dom: 'Bfrtip',
ajax: {
url: '/api/Controllers/Methods',
type: 'POST'
},
columns: [
{ data: "_id" },
{ data: "_code" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
but if I use
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12 hidden-xs'<'toolbar'>>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
instead of
dom: 'Bfrtip',
The Editor button not show,
Can you please help me on this ?
If there is no records listed in data table and user has tried to export data there should be message "No records found".
How can i set please advise ?
Dear all,
I am trying to use DataTable Editor (Paid version- Trial) in ASP.Net MVC web application,
I am getting raw Json response instead of view, can you please help me
My Controller Code is
``` [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult CDB_SERVER()
{
var formData = HttpContext.Request.Form;
string Result = string.Empty;
DataHelper dal = new DataHelper();
OraConn Connection = new OraConn();
string strDbType = "oracle";
string strDbConnection = Connection.ConnectionString("PROJECTS");
using (var db = new Database(strDbType, strDbConnection))
{
var response = new Editor(db, "cdb_contractors", "cont_id")
.Model<ContractorModel>()
.Field(new Field("cdb_contractors.cont_id")
.Set(false)
.Validator(Validation.NotEmpty())
.Validator(Validation.Numeric())
)
.Process(formData)
.Data();
return Json(response, JsonRequestBehavior.AllowGet);
}
}```
and .cshtml
@{
ViewBag.Title = "Tender & Contract - Contractor Database - Server Side";
}
<div id="content">
<!-- widget grid -->
<section id="widget-grid" class="">
REMOVE HTML MARKUP for VISIBILITY
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Contractor ID</th>
<th>Contractor Code</th>
<th>Contractor Name</th>
<th>Contractor Name Arabic</th>
<th>Contractor Grade</th>
<!--<th>Commercial Reg Info</th>
<th>Tender Board Reg Info</th>
<th>Chamber of Commerce Reg Info</th>
<th>DCRP Reg Info</th>-->
</tr>
</thead>
<tfoot>
<tr>
<th>Contractor ID</th>
<th>Contractor Code</th>
<th>Contractor Name</th>
<th>Contractor Name Arabic</th>
<th>Contractor Grade</th>
<!--<th>Commercial Reg Info</th>
<th>Tender Board Reg Info</th>
<th>Chamber of Commerce Reg Info</th>
<th>DCRP Reg Info</th>-->
</tr>
</tfoot>
</table>
</section>
</div>
@section pagespecific {
<script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function () {
var editor = new $.fn.dataTable.Editor({
ajax: "/TENDERCONTRACT",
table: "#example",
fields: [{
label: "Contractor Id:",
name: "cdb_contractors.cont_id"
}, {
label: "Contractor Code:",
name: "cdb_contractors.cont_code"
}, {
label: "Contractor Name English:",
name: "cdb_contractors.cont_desc"
}, {
label: "Contractor Name Arabic:",
name: "cdb_contractors.cont_desc_ar"
}, {
label: "Contractor Grade:",
name: "cdb_contractors.g_id",
type: "select",
placeholder: "Select a Grade"
}, {
label: "Contractor Email:",
name: "cdb_contractors.cont_email"
}, {
label: "Contractor Status:",
name: "cdb_contractors.is_active"
}, {
label: "Contractor Website:",
name: "cdb_contractors.website"
}, {
label: "PO Box:",
name: "cdb_contractors.pobox"
}, {
label: "Postal Code:",
name: "cdb_contractors.postal_code",
type: "select",
placeholder: "Select a Postal Code"
},
{
label: "Commercial Registration #:",
name: "cdb_contractors.cr_num"
}, {
label: "CR Expiry Date:",
name: "cdb_contractors.cr_exp_date",
"type": "datetime",
"format": "DD\/MM\/YY"
}, {
label: "Tender Board Registration #:",
name: "cdb_contractors.tb_reg_num"
}, {
label: "TBR Expiry Date:",
name: "cdb_contractors.tb_exp_date",
"type": "datetime",
"format": "DD\/MM\/YY"
}, {
label: "Chamber of Commerce Reg#:",
name: "cdb_contractors.coc_cert_no"
},
{
label: "DCRP Registration #:",
name: "cdb_contractors.dcrp_reg_num"
}, {
label: "DCRP Expiry Date:",
name: "cdb_contractors.dcrp_exp_date",
"type": "datetime",
"format": "DD\/MM\/YY"
}, {
label: "Created By:",
name: "cdb_contractors.crt_by"
}, {
label: "Created Date:",
name: "cdb_contractors.crt_dtm"
,
"type": "datetime",
"format": "DD\/MM\/YY HH:mm"
}, {
label: "Modified By:",
name: "cdb_contractors.edt_by"
}, {
label: "Modified Date:",
name: "cdb_contractors.edt_dtm"
,
"type": "datetime",
"format": "DD\/MM\/YY HH:mm"
}, {
"label": "Category:",
"name": "cdb_category[].cat_id",
"type": "checkbox"
}
]
});
$('#example').DataTable({
dom: "Bfrtip",
ajax: {
url: '/TENDERCONTRACT',
type: 'POST'
},
columns: [
{ data: "cdb_contractors.cont_id" },
{ data: "cdb_contractors.cont_code" },
{ data: "cdb_contractors.cont_desc" },
{ data: "cdb_contractors.cont_desc_ar" },
{ data: "cdb_contractor_grade.g_desc" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
});
</script>
}
I am getting only Json response like
{"draw":null,"data":[{"DT_RowId":"row_144","cdb_contractors":{"cont_id":"144","cont_email":null,"website":"www.sevenseasinfotech.com","pobox":"2648","g_id":null,"postal_code":"112","cr_exp_date":"08/08/16","tb_exp_date":"10/06/17","dcrp_exp_date":null,"crt_dtm":"02/10/15 18:59","edt_dtm":"04/04/16 12:02","cont_code":null,"supp_id":null,"cont_desc":"SEVEN SEAS INFOTECH","cont_desc_ar":"البحار السبع لتقنية المعلومات ش م م","is_active":"Y","cr_num":"1117659","tb_reg_num":"00002047","coc_cert_no":"14342","dcrp_reg_num":null,"crt_by":"MZS0680","edt_by":"MZS0680"},"cdb_postcode":{"area_ename":"Ruwi"},"cdb_contractor_grade":{"g_desc":null},"cdb_category":[{"cat_id":"1","crt_by":"MZS0680","crt_dtm":"01/10/2015 4:15:54 PM","category_desc":"ARCHIVE","edt_by":null,"edt_dtm":null},{"cat_id":"22","crt_by":"MZS0680","crt_dtm":"01/10/2015 4:15:54 PM","category_desc":"OTHERS","edt_by":null,"edt_dtm":null}]},
data continue
data continue
data continue
Hi guys,
Recently we implemented DataTables in our project and I'm not quite used to it yet.
We are trying to add additional information for every row. Before we used this solution : https://datatables.net/examples/api/row_details.html ,but now we want it to be open all the time, without event attached to it.
Can anyone help with solution to this problem, right now I'm literally nowhere ;(
Thanks in advance 
I'm using the Datatables Editor with a field select for two tables with the data of the examples. I've built a seletc field with the name of the city. Cities are in a different table from the one with staff names, In the staff table I have a field which is id_ciudad (the id of the city in the cities table).
The trouble is that I can't get the right city seleceted. It aways appears selected Edimburgh, even if that is not the city o the member of the staff I'm editing. The Editor object has been created in the following way:
var objetoEditor = new $.fn.dataTable.Editor({
ajax: 'crud_editor_04.php',
table: '#tabla_de_personal',
idSrc: 'id',
i18n: {
create: {
button: "Nuevo",
title: "Crear nuevo registro",
submit: "Grabar"
},
edit: {
button: "Editar",
title: "Editar registro",
submit: "Actualizar"
},
remove: {
button: "Borrar",
title: "Borrar registro",
submit: "Borrar",
confirm: {
_: "¿Estás seguro de eliminar estos %d registros?",
1: "¿Estás seguro de eliminar este registro?"
}
},
multi: {
title: "Múltiples valores",
info: "Los registros seleccionados contienen diversos valores para este campo. Para editar este campo con el mismo valor en los registros seleccionados, pulsa aquí. En caso conterario, los registros mantendrán sus valores individuales en este campo.",
restore: "Restaurar los valores múltiples",
noMulti: "Esta entrada puede ser modificada individualmente, pero no como parte de un grupo."
},
datetime: {
previous: 'Anterior',
next: 'Siguiente',
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
weekdays: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']
}
},
fields: [
{label: 'Nombre:', name: 'personal.nombre', attr: {class:'form-control'}},
{label: 'Apellido:', name: 'personal.apellido', attr: {class:'form-control'}},
{label: 'Cargo:', name: 'personal.cargo', attr: {class:'form-control'}},
``` {```
``` label: 'Ciudad:', ```
``` name: 'personal.id_ciudad',```
``` attr: {class:'form-control'}, ```
``` type: "select", ```
``` options: [```
``` {label:'Edinburgh', value:'1'},```
``` {label:'London', value:'2'},```
``` {label:'New York', value:'3'},```
``` {label:'San Francisco', value:'4'},```
``` {label:'Sidney', value:'5'},```
``` {label:'Singapore', value:'6'},```
``` {label:'Tokyo', value:'7'}```
``` ]```
``` },```
{
label: 'F. Ingreso:',
name: 'personal.fecha_de_ingreso',
type: 'date',
def: function(){return new Date();},
dateFormat: 'dd-mm-yy',
attr: {readonly:true, class:'form-control', style:'display:inline'},
opts:{
buttonImage:'editor/images/calendar.png',
buttonImageOnly: true,
buttonText: 'Elegir fecha',
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
firstDay: 1,
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
changeMonth: true,
changeYear: true,
prevText: "Anterior",
nextText: "Siguiente"
}
},
{
label: 'Salario anual:',
name: 'personal.salario_bruto_anual',
attr: {class:'form-control'},
fieldInfo: 'El salario debe ir como valor numérico, con dos decimales (incluso si son 00), separados por un punto.'
},
]
});
How can I mark an option of the select field as selected? I've tried def: 'personal.id_ciudad', def:'ciudades.id' and def:'ciudades.id' but nothing works. No preselected option in my select.
I've bought a single developer License today, for the case it is a trial limitation, but it does not work all the same.
Can someone help me?
Thanks a lot everyone.
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
I've created two custom buttons, which I want to display.
When I use this code:
table = $('#eventResultsTable').DataTable( {
dom: 'Bfrtip',
searching: false,
buttons: ['graph', 'timeline']
} );
The buttons display, but it removes the widget that allows the user to select how many records to view.
When I use this code (preferred, because I use bootstrap), they don't show up at all:
table = $('#eventResultsTable').DataTable( {
searching: false,
buttons: ['graph', 'timeline']
} );
table.buttons().container()
.appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
Please advise.
anyone come across this? my Date column is in varchar and in my editor i try to query like this
if (isset( $_GET['Start'])) {
$editor
->where('timesheets.UserId',$_GET['UserId'] )
->where('str_to_date(timesheets.Date,"%d-%M-%Y")','str_to_date("'.$_GET['Start'].'","%d-%M-%Y")',">=" )
->where('str_to_date(timesheets.Date,"%d-%M-%Y")','str_to_date("'.$_GET['End'].'","%d-%M-%Y")',"<=" );
}
I test the query in phpmyadmin, it works but in editor it is not. Then i try
if (isset( $_GET['Start'])) {
$editor
->where('timesheets.Date',$_GET['Start'],">=" )
->where('timesheets.Date',$_GET['End'],"<=" );
}
this one return data but the it only compare the day not month . e.g: when i select between 01-Nov-2016 to 30-Nov-2016, the data fall in 01-31 Dec-2016 appear also as long as the day is in between 01 and 31. kindly advise. i wanted to make the first option works but no clue.
When scrollX= true for columns less than page size,t he value cells do not line up with heading cells.
Hi,
Based on the Editor php code (v.1.6.0), it does not seem to handle column['search']['regex'] = true to perform a "regexp" where rather than "like".
Is this a known limitation? what's the best workaround?
I've been through multiple forum questions and documentation, but am still stuck. I would like a simple checkbox above the DataTable that allows the user to select when wanting to filter based on a single column value. For example, only display the records in the DataTable where the Shipped column is equal to "NO". I can get the checkbox to display, but cannot figure out how to cause the filtering to occur when the checkbox is checked. Has anyone accomplished this scenario? -Thx.
URL:
http://www.warrencountyia.org/testing/directory.shtml
My page has a directory that references a CSV file- when it is edited in Excel or any other csv editor either for content or to add/remove columns etc. it breaks the page and I get an error on the second to last line (195 of 196)... If I delete lines 195 and 196, then the error just moves on up to 193.
Error:
DataTables warning: table id=directory - Requested unknown parameter '2' for row 195. For more info.... http://datatables.net/tn/4
Debug Data
http://debug.datatables.net/okuleb
I have looked through the referenced page but just have found nothing. I either am missing something silly or there is something deeper that I have just not seen.
**hi to all,
the following is my jsp file.while i click the pdf button i got pdfmake.min.js:20 Uncaught TypeError: Cannot read property 'records' of undefined.screenshot for this is attached.Please help me.i'm tired to solve this issue.Thanks in advance**
<%@page import="java.util."%>
<%@page import="java.text."%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="logic" uri="/WEB-INF/struts-logic.tld"%>
<%@ taglib prefix="html" uri="/WEB-INF/struts-html.tld"%>
<%@ taglib prefix="bean" uri="/WEB-INF/struts-bean.tld"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Report List</title>
<link href="css1/jquery.dataTables.min.css" rel="stylesheet">
<link href="css1/buttons.dataTables.min.css" rel="stylesheet">
<link href="css1/jquery-ui.css" rel="stylesheet">
</head>
<html:form action="/loadinvoicereportwithfilter">
<body>
<div id="dialog" title="Item Detail">
<br> Invoice Number : <input type="text" id="invid_js"
readonly="readonly" /> Date : <input type="text"
id="invdate_js" readonly="readonly" /> <br> <br> <br>
<div id="demo">
<table id="tableInvdetail" class="display" border="0"
cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>S.No</th>
<th>Part Number</th>
<th>Description</th>
<th>Quantity</th>
<th>Serial Numbers</th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<logic:notPresent name="reportinvoiceList">
<h1>Cannot Connect with Database</h1>
</logic:notPresent>
<logic:empty name="reportinvoiceList">
<h2>No Records Found</h2>
</logic:empty>
<logic:present name="reportinvoiceList">
<fieldset>
<legend>Filter</legend>
<div id="controlgroup">
<input type="checkbox" id="yrAll" property="yrAllcheck"
styleId="yrAllcheck" name="yrAllcheck" id="yrAllcheck"
onclick="countChecked();" onchange="countChecked();"> <label
for="insurance">Show All</label> <label
for="transmission-automatic"> OR </label> <label
for="insurance"> Years From</label> <select
id="yrFrom" name="showinvreportformwithfilter">
<logic:notEmpty name="yList">
<logic:iterate id="year1" name="yList">
<option value='${year1.years}'>
<bean:write name="year1" property="years" />
</option>
</logic:iterate>
</logic:notEmpty>
</select> <label for="insurance"> To</label> <select
id="yrTo" name="showinvreportformwithfilter">
<logic:notEmpty name="yList">
<logic:iterate id="year1" name="yList">
<option value='${year1.years}'>
<bean:write name="year1" property="years" />
</option>
</logic:iterate>
</logic:notEmpty>
</select> <label for="insurance"> Client</label> <select
id="client" name="showinvreportformwithfilter">
<logic:notEmpty name="reportclientList">
<option value='0000'>Select Client</option>
<logic:iterate id="client" name="reportclientList">
<option value='${client.clientId}'>
<bean:write name="client" property="clientName" />
</option>
</logic:iterate>
</logic:notEmpty>
</select>
<button id="button" onclick="checkYears();">Filter</button>
</div>
</fieldset>
<div>
<br>
<br>
</div>
<div id="demo1">
<table id="tableRepdetail" class="display nowrap" cellspacing="0"
width="100%">
<thead>
<tr>
<th align="left" colspan="2"></th>
<th align="center" colspan="8">
<%
Calendar calendar = Calendar.getInstance();
SimpleDateFormat dateFormat = new SimpleDateFormat("EEE, d MMM yyyy HH:mm:ss aaa");
String date = dateFormat.format(calendar.getTime());
%>
<h1>Invoice Report</h1> <%=date%>
<div align="left">
<h3>
Client :
<bean:write name="clientfilter" />
<bean:write name="yearfilter" />
</h3>
<span> </span>
</div>
</th>
</tr>
<tr>
<th align="center" rowspan="2">S.No</th>
<th align="center" rowspan="2">Customer</th>
<th align="center" colspan="2">Invoice</th>
<th align="center" rowspan="2">D.C No.</th>
<th align="center" rowspan="2">PO Number</th>
<th align="center" colspan="3">Warranty</th>
<th align="center" rowspan="2">Item <br />Details
</th>
</tr>
<tr>
<th align="center">Number</th>
<th align="center">Date</th>
<th align="center">Terms<br />(In Months)
</th>
<th align="center">Start</th>
<th align="center">End</th>
</tr>
</thead>
<tbody>
<logic:iterate id="invoice" name="reportinvoiceList"
indexId="invreportindex">
<tr>
<td align="left"><%=invreportindex + 1%></td>
<td align="left"><bean:write name="invoice"
property="custName" /></td>
<td align="left"><bean:write name="invoice"
property="invoiceNumber" /></td>
<td align="left"><bean:write name="invoice"
property="invoiceDate" /></td>
<td align="left"><bean:write name="invoice"
property="delChalanNum" /></td>
<td align="left"><logic:iterate id="po" name="invoice"
property="po">
<bean:write name="po" property="purchaseNumber" />
<br>
</logic:iterate></td>
<td align="center"><bean:write name="invoice"
property="varrentyTerm" /></td>
<td align="center"><bean:write name="invoice"
property="varrentyDate" /></td>
<td align="center"><bean:write name="invoice"
property="expairy_date" /></td>
<td align="left">
<button id="button"
onclick="goModify('${invoice.invoice_ID}','${invoice.invoiceNumber}','${invoice.invoiceDate}');">Show</button>
</td>
</tr>
</logic:iterate>
</tbody>
</table>
</div>
</logic:present>
</body>
</html:form>
</html>
Hello All,
I'm experiencing a very weird issue with datatables when using two of them, issue is the following one:
I have these definitions:
(function($){
$(document).ready(function() {
$("#example").DataTable( {
"columns": [
null,
{className: "number"},
{className: "number"},
null,
null,
null,
null,
{visible: false},
{visible: false}
],
"order": [[ 6, "desc" ]],
"language": {
"search": "",
"searchPlaceholder": "Search this list"
},
"dom": '<"toolbar">frtip'
} );
$('#example3').DataTable( {
"columns": [
null,
{className: "number"},
{className: "number"},
null,
null,
null,
null,
{visible: false},
{visible: false}
],
"order": [[ 6, "desc" ]],
"language": {
"search": "",
"searchPlaceholder": "Search this list"
},
"dom": '<"toolbar">frtip'
} );
For tables:
<
table id="example" class="display table table-striped" cellspacing="0" width="100%">
and
<
table id="example3" class="display table table-striped" cellspacing="0" width="100%">
The problem I'm experiencing is that the css class is not being applied to the "example3" table at all, which is weird because if I remove the first table and rename "example3" into "example" it magically works. Same issue happens if I change "example" into "example1" or anything else, styling just goes away.
Are the stylesheets somehow linked to the table ids (specifically "example")? This is very weird because it seems to be working only when there is one table and it has "example" as the id. Everything else is working, I can search and sort and I see the data on both tables perfectly, it is just that styling issue.
Any help would be extremely appreciated.
Is there a complete list (all in one place) of built in events that can be listened for?
I am using server side processing for my tables. I have tables that have 60000+ rows with 65+ columns, so using client side is not an option for me. My end users want to pull up the tables and then use the filtering and sorting to narrow down what they are seeing. Then they want to Export All, usually still 30k - 40k rows with the 65+ columns and with the sorting in place too. I have tried a few things that I've found elsewhere and am hoping that you can help. Here's what I've tried so far:
{ extend: 'excel',
text: 'Export Current Page',
exportOptions: {
modifier: {
page: 'current'
}
},
customize: function (xlsx)
{
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s', '7');
}
}
This does not do what I would like. It exports only the current page (which is why I made the text for it 'Export Current Page')
I've also tried this:
{
text: 'Export All to Excel',
action: function (e, dt, button, config)
{
dt.one('preXhr', function (e, s, data)
{
data.length = -1;
}).one('draw', function (e, settings, json, xhr)
{
var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
var addOptions = { exportOptions: { 'columns': ':all'} };
$.extend(true, excelButtonConfig, addOptions);
excelButtonConfig.action(e, dt, button, excelButtonConfig);
}).draw();
}
}
This simply sends the whole table to the screen instead of sending it to an excel file. Though it does pull the whole data set.
I'm sure that through the two of these I'm missing something that would allow me to Export the whole data set without sending it to the screen first.
I can't seem to find anything on this subject, but I am having trouble incorporating the Buttons extension into my datatable configuration. I can get the basic configuration to work just fine and separately and I can get the Buttons configuration to work fine. My problem is getting them to work together.
It may be as simple as the order that I am adding the CSS and JS files to my file...but at this point, I am stumped and very frustrated.
As the table information is accounting related, I need to export the filtered data in either...csv, excel, or pdf format and in landscape mode; I have all these working in a separate table. Hints, directions, examples, pointers to previous solutions, etc greatly appreciated.
Hi,
It seems that when I try to build a non-binding "where" condition, the value still gets quoted, which prevents anything like the example from working:
https://editor.datatables.net/manual/php/conditions#Binding-submitted-data
This will generate a error indicating "unknown column 'xxx' in where clause.
Modifying Query.php at line 1056 for the following seems to fix it:
'query' => $this->_protect_identifiers($key) .' '. $op .' '. $value
I have been working recently with DataTables and server sided processing. Some of the test data I was using was not sanitized ie:
<script>alert('xss');</script>
and discovered DataTables directly injects data into the innerHTML of an element. I did not want to waste time processing the data on the client side so I simply reworked the creation of cells. For example
// Need to create the HTML if new, or if a rendering function is defined
if ( !nTrIn || oCol.mRender || oCol.mData !== i )
{
//nTd.innerHTML = _fnGetCellData( oSettings, iRow, i, 'display' );
nTd.appendChild(document.createTextNode(_fnGetCellData(oSettings, iRow, i, 'display')));
}
Or this example in sorting:
if ( /*was just sTitle*//*document.createTextNode(column.sTitle).innerHTML*/column.sTitle != cell.text() ) {
//cell.html( column.sTitle );
while (cell[0].lastChild) {
cell[0].removeChild(cell[0].lastChild);
}
cell[0].appendChild(document.createTextNode(column.sTitle));
}
Note the replacement is just appending a text node. Some additional code was required to ensure the nodes are empty but it seems to be a relatively simple (and beneficial?) fix.
How can we go about implementing these changes? Is it something that would be possible to do for a nightly build that might work as an initialization option?