I am facing with a error fired by Firebug when using a jquery datatables plugin
The table is like this:
<table id="dt_cursuri" class="table table-striped table-bordered dTableR">
<thead>
<tr>
<th data-class="expand">Curs</th>
<th data-hide="phone,tablet" data-name="Assign">Domeniu</th>
<th>Tip</th>
<th>Data modif</th>
<th class="centered-cell">Actiuni</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dataTables_empty" colspan="6">Fetching data from server</td>
</tr>
</tbody>
</table>
The datatables initialization:
var oTable;
var responsiveHelper = undefined;
var breakpointDefinition = {
tablet: 1024,
phone : 480
};
var oTable = $('#dt_cursuri');
oTable = $('#dt_cursuri').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "bootstrap",
"sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"sAjaxSource": "view/cursuri/server_side.php",
autoWidth : false,
"fnPreDrawCallback": function () {
// Initialize the responsive datatables helper once.
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(oTable, breakpointDefinition);
}
},
"fnDrawCallback" : function (oSettings) {
responsiveHelper.respond();
},
"fnRowCallback": function( nRow, aData ) {
responsiveHelper.createExpandIcon(nRow);
},
"aoColumns": [
//{ "sClass": "center", "bSortable": false, sWidth: '2%', "bVisible": false },
{ sWidth: '35%' },
{ sWidth: '25%' },
{ sWidth: '20%' },
{ sWidth: '10%' },
{ "sClass": "center", sWidth: '10%', "bSortable": false }
],
"aaSorting": [[2, 'asc']]
} );
The server side json file is working corectly. The same code is used in other tables that work perfect, but this one is not
Could someone help me?
The error is fired for this line from jquery.datatables.js:
!a.sLoadingRecords && (c && 'Loading...' === b.sLoadingRecords) && D(a, a, 'sZeroRecords', 'sLoadingRecords');
I will answer this question on my own thanks to developers of jQuery Datatables.
The problem was in the server side processing. When using diacritics the datatable is messing with the data so you have to actually control the diacritics with utf8_encode() php function
Related
I have following dataTables jquery in my js file
$("#manage_chauffeurs").dataTable({
"processing": true,
"bServerSide": true,
"aaSorting": [],
"ajax":{
'type': 'POST',
'url': '/admin/reports/chauffeurs_data'
},
"responsive": true,
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 14 ] }
],
"columnDefs": [ { targets: '_all', visible: true } ],
"dom": '<"top"f>rt<"bottom"p><"clear">',
"aoColumns": [
{ "mDataProp": "name", "sDefaultContent": "", "sClass": "center_align"},
{ "mDataProp": "user_id", "sDefaultContent": "", "sClass": "center_align" }
]
});
Below is the html
<table class="display responsive no-wrap" id="manage_chauffeurs">
<thead>
<tr>
<th width="50%">User Name</th>
<th width="50%">User ID</th>
</tr>
</thead>
</table>
I have the resource '/admin/reports/chauffeurs_data' set at my server. However, I don't get an ajax call. No call at all.
Browser console gives the following error:
jquery.dataTables.js?body=1:4090 Uncaught TypeError: Cannot read property 'style' of undefined
Checked for above error, I have no mismatch of columns in my code.
What could be going wrong here?
Someone please help!
Used the data table plugin and try to add the two links Edit and Delete When I click on links it should redirect to some other page.
Please help me on this.. Thanks in advance...
Please find my code snippet:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="#Url.Content("~/Areas/Admin/content/js/bootstrap.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Areas/Admin/content/js/plugins/datatables/jquery.dataTables.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Areas/Admin/content/js/plugins/datatables/dataTables.bootstrap.js")" type="text/javascript"></script>
<div class="box-body table-responsive">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>EmployeeID</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div><!-- /.box-body -->
<script>
var serviceRootUrl = 'http://localhost:49425/Services/MyWcfService.svc/';
$(document).ready(function () {
var oTable = $('#example').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": serviceRootUrl + "EmployeeListResponseCollection",
"aoColumns": [
{ data: "EmployeeID" },
{ data: "Description" },
{
data: null,
"sClass": "center",
"sDefaultContent": 'Edit / Delete'
}
]
});
});
Use the mdata and mrender for the additional field or column to the datatables grid.
Use this snap code inside the script and it should work.
$(document).ready(function () {
var oTable = $('#example').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": serviceRootUrl + "EmployeeListResponseCollection",
"aoColumns": [
{ "mData": "EmployeeID" },
{ "mData": "Description" },
{
"mData": "EmployeeID",
"mRender": function (data, type, full) {
return 'Edit';
}
},
{
"mData": "EmployeeID",
"mRender": function (data, type, full) {
return 'Delete';
}
}
]
});
});
I am facing an issue with Datatable .
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<c:forEach items="${Details.columns}" var="column">
<th>${column.columnTitle}</th>
</c:forEach>
</tr>
</thead>
<tfoot>
<tr>
<c:forEach items="${Details.columns}" var="column">
<th></th>
</c:forEach>
</tr>
</tfoot>
<tbody>
<c:forEach items="${Details.callList}" var="call">
<tr>
<c:forEach items="${call.attributes}" var="attribute">
<td>${attribute.value}</td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
</table>
$("#example1").dataTable({
'sDom': '"top"i',
//"aoColumnDefs": [{ "bSearchable": true, "aTargets": [1] }],
"bPaginate" : true,
"bLengthChange" : false,
//"bFilter" : true,
"bSearchable": true,
"bSort" : true,
"bInfo" : true,
"bAutoWidth" : false,
"iDisplayLength": 5
//}).columnFilter({"aoColumns": [{ "type": "text" }, { "type": "text" }, null]});
}).columnFilter({"aoColumnDefs": [{ "bSearchable": true, "aTargets": [2] }]});
From the above snippet.. i am trying to remove the filter/search for last column alone.
Here "aoColumns" works as expected - It removes the filter in last column as i coded,
However i am unable to use "aoColumns" . Since the columns in this table is dynamic/configurable, so it is tough for me to change the code everytime.
It would be really grateful if anyone can help me here..
Thanks,
This is how I use Datatables and it works like a charm. I don't do sorting at client-side, I do it at server-side using AJAX, but the configuration for the table should be the same except for "bServerSide=true". Let me know if this solves your problem:
var oTable = $('#tblMainTable').dataTable({
"searching": false,
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem('jobTitlesDataTables', JSON.stringify(oData));
},
"fnStateLoad": function (oSettings) {
return JSON.parse(localStorage.getItem('jobTitlesDataTables'));
},
"pagingType": "full_numbers",
"bLengthChange": false,
"bAutoWidth": false,
"iDisplayLength": 2000,
"bServerSide": true, // server side
"sAjaxSource": BASE_URL + "Job/GetJobTitleMappingDTOs", // AJAX URL
"bProcessing": true,
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
// send data from client-side to server-side
aoData.push({ "name": "IsMapped", "value": $("#bdgIsMapped").data("selected") });
aoData.push({ "name": "IsSearchableOption", "value": $("#bdgIsSearchable").data("selected") });
aoData.push({ "name": "timestamp", "value": new Date().getTime() }); // Added to avoid caching in some IE versions.
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"cache": false,
"success": function (json) {
// shows records count next to the top title
if (json.iTotalRecords > 0) {
$("#resultsDescription").text(" - " + json.iTotalRecords + " rows.");
}
else {
$("#resultsDescription").text(" - No results.");
}
// shows paginator when necessary
if (json.iTotalRecords > json.iDisplayLength) {
$(".dataTables_paginate").show();
}
else {
$(".dataTables_paginate").hide();
}
$("#isFirstSearch").val("false");
fnCallback(json);
}
});
},
"aoColumnDefs": [
{
sType: "numeric",
mData: "RowNumber",
aTargets: [0],
mRender: function (data, type, full) {
// this is for custom rendering a column just in case you need it
// 'full' is the row's data object, and 'data' is this column's data
return '<span class="RowNumber">' + full.RowNumber + '</span>';
}
},
{
sType: "numeric",
mData: "JobTitleId",
aTargets: [1],
mRender: function (data, type, full) {
// 'full' is the row's data object, and 'data' is this column's data
return '<span class="EditableJobTitleId" data-job-title-id="' + full.JobTitleId + '">' + full.JobTitleId + '</span>';
}
},
{
sType: "string",
mData: "JobTitle",
aTargets: [2]
}
],
"order": [[1, "asc"]]
});
I am trying to build my DataTable (1.10.5) using an ajax call to a service - http://www.datatables.net/examples/ajax/
Here is my Javascript:
$('#tableexample').DataTable({
"dom": 'C<"clear">lfrtip',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../../api/EventTypes/GetAll",
"aoColumnDefs": [
{
"aTargets": [0],
"mData": "Id"
},
{
"aTargets": [1],
"mData": "Name"
},
{
"aTargets": [2],
"mData": "Name"
},
{
"aTargets": [3],
"mData": "Name"
},
{
"aTargets": [4],
"mData": "Name"
}
]
});
Here is my HTML:
<table id="tableexample" class="table table-striped dataTable table-hover">
<thead>
<tr>
<th>Select</th>
<th>Event</th>
<th>Primary Category</th>
<th>Secondary Category</th>
<th>Workflow</th>
</tr>
</thead>
</table>
Here is my error:
Uncaught TypeError: Cannot read property 'length' of undefined
If I look i my jquery.dataTables.js - it says that my data is undefined...
var data = _fnAjaxDataSrc( settings, json );
Can anyone help me out with setting up my ajax call properly to dynamically build my table??
Thanks!
Finally found it!
I needed to make an ajax call and pass the data to "aaData":
$.ajax({
url: '/Portal/api/EventTypes/GetEventWorkflowDefinitions',
type: 'GET',
dataType: 'json',
success: function (data) {
assignToEventsColumns(data);
}
});
function assignToEventsColumns(data) {
var table = $('#tableexample').dataTable({
"dom": 'C<"clear">lfrtip',
"bAutoWidth": false,
"aaData": data,
"aaSorting": [],
"aoColumnDefs": [
{
"aTargets": [0],
"bSearchable": false,
"bSortable": false,
"bSort": false,
"mData": "EventTypeId",
"mRender": function (event) {
return '<input class="childCheck" type="checkbox" id="childCheckBoxes" value="' + event + '">';
}
},
{
"aTargets": [1],
"mData": "EventType"
}
Once I did this...the table build perfectly!
Hi i have successfully implemented jquery data table server side call,but i am unable to load data in html view
it just says processing
here is my Js code
$('#internetTable').dataTable({
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': 'api/values/GetInternetSales'
"aoColumns": [
{ "mData": "Calls" },
{ "mData": "LevelOneOperators" },
{ "mData": "LevelTwoOperators" },
{ "mData": "Issueraised" },
{ "mData": "SalesDate" },
{ "mData": "AutomaticResponses" }
]
});
and this is html code
<table id="internetTable" class="table table-bordered table-hover">
<thead>
<tr>
<th >Date</th>
<th>Issue Raised</th>
<th>Level One Operators</th>
<th >Level Two Operators</th>
<th>Automatic Responses</th>
<th>Calls</th>
</tr>
</thead>
</table>
And the response am getting from server is
{"sEcho":"2","iTotalRecords":10,"iDisplayStart":1,"iDisplayEnd":1,"iDisplayLength":10,"iTotalDisplayRecords":100,"InternetDataList":[{"Calls":"320","LevelOneOperators":"1","LevelTwoOperators":"7","Issueraised":"1","SalesDate":"2010-11-25T00:00:00","AutomaticResponses":235}]}
Now,just want to ask that what modifications in JS code do i need to do to parse it in table,as i have searched alot but could'nt get any solution.
Got the answer i need to add following code in js:
$('#internetTable').dataTable({
'bProcessing': true,
'bServerSide': true,
"sServerMethod": "GET",
// to enable Pagination
"sPaginationType": "full_numbers",
'sAjaxSource': 'api/values/GetInternetSales',
"sAjaxDataProp": "InternetDataList",
"aoColumnDefs": [{
"mData": "InternetDataList"
}],
"aoColumns": [
{ "mData": "Calls" },
{ "mData": "LevelOneOperators" },
{ "mData": "LevelTwoOperators" },
{ "mData": "Issueraised" },
{ "mData": "AutomaticResponses" },
{ "mData": "SalesDate" }
]
});
As,here the sAjaxDataProp is your data name as in my case it is InternetDataList and default it is aadata