I am using jquery datatables in a mvc. i have loaded the script files properly but still datables is not working.
Code in _layout.cshtml:
<!--Data table jquery-->
<script src="~/Content/jquery-2.2.3.js"></script>
<script src="~/Content/datatables/jquery.dataTables.js"></script>
and code in index.cshtml for datatable:
$(document).ready(function () {
//jQuery DataTables initialization
var table = $('#MyTable').DataTable({
"processing": true, // for show processing bar
"serverSide": true, // for process on server side
"orderMulti": false, // for disable multi column order
"dom": '<"top"ip>rt<"bottom"lp><"clear">', // for hide default global search box // little confusion? don't worry I explained in the tutorial website
"ajax": {
"url": "/Product/LoadData",
"type": "POST",
"datatype": "json"
},
"aoColumns": [
{ "mData": "ProductID", "name": "ProductID", "visible": false, "autoWidth": true },
{ "mData": "ProductName", "name": "ProductName", "visible": false, "autoWidth": true },
{ "mData": "Qty", "name": "Qty", "autoWidth": true },
{ "mData": "UnitPrice", "name": "UnitPrice", "visible": true, "autoWidth": true },
{ "mData": "CatagoryID", "name": "CatagoryID", "autoWidth": false },
{ "mData": "catagoryname", "name": "catagoryname", "visible": true, "autoWidth": true }
]
});//End DataTable
});
When i run it gives following error:
Uncaught TypeError: $(...).DataTable is not a function
(anonymous function)# Product:91
fire # jquery-2.2.3.js:3187
fireWith # jquery-2.2.3.js:3317
ready # jquery-2.2.3.js:3536
completed # jquery-2.2.3.js:3552
you have your datatable.js in your _layout , you could be creating a conflict , set your datatable.js benchmark index at the end along with your declaration of datatable for all the DOM is preloaded when running the $().datatable
Related
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>
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
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.
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
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.