Develop Reference

Uncaught TypeError: Cannot read property 'preparse' of null

I am trying to display dates in jquery data tables and fetching the data through a sql stored procedure. I am seeing this error when trying to use moment.js to have the correct format of date to display date in the data tables.
$(document).ready(function() {
var mesa = $('.datatable').DataTable({
filename: "LocationCodes",
responsive: true,
"bAutoWidth": false, // toggle this depending on how wide you want the table
"ajax": {
"url": "/controller/storedprocedure",
"type": "GET",
"datatype": "json"
},
"deferRender": true,
"responsive": true,
dom: 'Bfrtip',
"bSort": false,
buttons: ['excel', 'print'],
"columns": [{
"data": "FileName"
}, {
"data": "ProjectName"
}, {
"data": "RecordInsertTime",
"sType": 'date'
}],
"columnDefs": [{
targets: 2,
render: $.fn.dataTable.render.moment('2017-08-13', 'YYYY-MM-DD', 'en')
}]

As suggested in the question's comments, for those who wants to use the locale parameter in $.fn.dataTable.render.moment(), you need to load the file moment-with-locales.js instead of moment.js.
For example with a CDN (placed before DataTables):
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>

jquery datatable binding data property to content that is displayed

I have my jQuery datatable plugin installed and I've initialized it like this:
$('#datatable-responsive2').DataTable({
// data: data,
// deferRender: true,
"pageLength": 25,
"bLengthChange": false,
"processing": true,
"serverSide": true,
"filter": false,
"orderMulti": false,
"ajax": {
"url": "/Administrator/LoadData/",
"type": "POST",
"datatype":"json"
},
"columns": [
{ "data": "FirstName", "name": "Lela", "autoWidth": true },
{ "data": "Email", "name": "Email", "autoWidth": true },
{ "data": "Active", "name": "Status", "autoWidth": true },
{ "targets": -1, "data": "UserId", "defaultContent": "<button>Click!</button>", "autoWidth": true },
{ "data": "FirstName", "name": "Full name", "autoWidth": true }
]
});
Please note this column:
{ "targets": -1, "data": "UserId", "defaultContent": "<button>Click!</button>", "autoWidth": true }
I've followed their documentation on how to render an HTML element there... But what I need now and wasn't able to figure how do I actually set a certain attribute for this HTML element inside the datatable when its being generated...
As u can see I've set data source for the datatable as UserId, and now I'd like each button "Click" to have value whatever the value of UserId is...
Can someone help me out?
P.S. so I want to output an HTML element in that column whos structure would be something like this:
<button values="whatever the value of userId is..?">Click me event</button>

You would need to define the render property of the column for that which would be the following :
{
"targets": -1,
"data": "UserId",
"render": function (data, type, full, meta) {
return "<button id='"+ data +"'>Click!</button>";
},
"autoWidth": true
}
The data property will be containing UserId in it which can be used in the render function.
You can refer to the documentation of it here

MP3 Files not playing through inline player

I have a page loading a datatable of mp3 files through a server side script. I am using the sound manager plugin to play the files, however they do not play inline and only open in a new window. I think this is because the inline player is initializing before the table is fully loaded, so it is not finding the mp3 files. How can I get the "listen" button to play these files inline (on the page)?
Javascript:
<script src="{{asset('soundmanager/js/soundmanager2-jsmin.js')}}"></script>
<script src="{{asset('soundmanager/js/inlineplayer.js')}}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#uploads-table').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bPaginate": true,
"destroy": true,
"sAjaxSource": "/api/admin/tables/uploads",
"order": [[5,'desc']],
"columnDefs": [ { //this prevents errors if the data is null
"targets": "_all",
"defaultContent": ""
} ],
"columns": [
// title will auto-generate th columns
{ "data": "name", "title": "Name", "orderable": true, "searchable": true },
{ "data": "description", "title": "Description", "orderable": true, "searchable": true },
{ "data": "file_extension", "title": "File Extension", "orderable": true, "searchable": true },
{ "data": "mimetype", "title": "Mimetype", "orderable": true, "searchable": true },
{ "data": "created_by", "title": "Created By", "orderable": true, "searchable": true },
{ "data": "created_at", "title": "Created At", "orderable": true, "searchable": true },
{ "data": "updated_at", "title": "Updated At", "orderable": true, "searchable": true },
{ "data": "actions", "title": "Actions", "orderable": false, "searchable": false}
]
});
});
</script>
Server side script:
$upload = Upload::select(array('id','name', 'description', 'file_extension', 'mimetype', 'created_by', 'created_at', 'updated_at', 'filename', 'is_remote'));
return Datatables::of($upload)
->edit_column('name', '{{$name}}')
->edit_column('created_by', function($upload) {
return ($upload->user ? ''.$upload->user->username.'' : 'Unknown');
})
->edit_column('actions', function($upload) {
if($upload->is_remote) {
$filePath = URL::to($upload->filename);
}
else {
$filePath = URL::to($upload->getFilePath());
}
return ('Listen
View
Edit
<a data-itemname="'.$upload->name.'" data-action="/admin/content/uploads/'.$upload->id.'/delete" data-title="Delete Upload?" data-toggle="modal" href="#deleteModal" class="confirmDelete btn btn-xs btn-default">Delete</a>');
})
->remove_column('id')
->make(true);

Use drawCallback option to initialize SoundManager2 player on every table draw.
$('#uploads-table').dataTable( {
drawCallback: function(settings){
// Workaround: remove click event handler from
// MP3 links other than the once in the table.
inlinePlayer.removeEventHandler(document, 'click', inlinePlayer.handleClick);
inlinePlayer.init()
},
// other options
});
Please note, that initializing the player is the only way to force it to rescan MP3 links. If you have other MP3 links on the page they may be initialized twice. That is why I included the line to remove click event handler before re-initializing the player.

Datatable FixedHeader Plugin Error

i am using Datatable FixedHeader Plugin. check my code. but plugin not work properly.
console error occured "TypeError: $.fn.dataTable.FixedColumns is not a constructor"
please give me solution. thanks
$(document).ready(function() {
var table=$("#example").dataTable( {
"bProcessing": false,
"bServerSide": false,
"sort": "position",
"scrollY":"300px",
"scrollX":"200px",
"scrollCollapse": true,
"sAjaxSource": "searchatOrganisations",
"aoColumns": [
{ "mData": "aoId" },
{ "mData": "aoCreatedby" },
{ "mData": "aoCreatedon" },
{ "mData": "aoModifiedby" },
{ "mData": "aoModifiedon" },
{ "mData": "aoName" },
{
"mData": null,
className: "center",
defaultContent: 'Edit / Delete'
}
]
} );
new $.fn.dataTable.FixedColumns( table, {
leftColumns: 1,
rightColumns: 1
} );
} );
TypeError: $.fn.dataTable.FixedColumns is not a constructor

Include Following JS and CSS to get fixed header in DataTable.
https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css
https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js
ref Link: https://datatables.net/download/release

You need to include JS file on your page.
dataTables.fixedHeader.js
I also faced same problem, this is the js which needs to include

Uncaught TypeError: Object [object Object] has no method 'fnFilterClear'

I am getting this error in the console :
"Uncaught TypeError: Object [object Object] has no method 'fnFilterClear'"
My code :
$(document).ready(function () {
var selectedColumn = $('#columnlist').find(":selected").text();
$('#csearchtext').bind("change paste keyup", function () {
var input = $('#csearchtext').val();
var dropdownindex = $("select[name='columnlist'] option:selected").index();
console.log(dropdownindex);
$('#table_id').dataTable().fnFilter(input, dropdownindex + 1, false, true, true, false);
});
$('#columnlist').on('change', function () {
$('#table_id').dataTable().fnFilterClear();
});
$('#dblist').on('change', function () {
var selected = $('#dblist').find(":selected").text();
tablefill(selected);
});
$('#search').click(function () {
var selected = $('#dblist').find(":selected").text();
tablefill(selected);
});
function tablefill(selected) {
$('.advsearchbar').show();
$('#stable').show();
$('#table_id').dataTable({
"sAjaxSource": '/php/connect/searchtablequery.php',
"bProcessing": true,
"sScrollY": "500px",
"bDeferRender": true,
"bDestroy": true,
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": selected });
},
"aoColumns": [
{ "mData": "calldate" },
{ "mData": "recordingfile" },
{ "mData": "uniqueid" },
{ "mData": "src" },
{ "mData": "did" },
{ "mData": "lastapp" },
{ "mData": "dst" },
{ "mData": "disposition" },
{ "mData": "duration" },
{ "mData": "userfield" },
{ "mData": "accountcode"}],
"iDisplayLength": 20,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}]
}
});
}
});
The javascript is firing just fine but the one spot that triggers the fnfilterclear has that error prompted.

Look at http://datatables.net/plug-ins/api#how_to How to use Datatable Plug-in API. You have to include the function listed on that page to use the function.
To make use of one of the plug-in API functions below, you simply need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. After that, you will be able to initialise the table, and call the function on the resulting object.