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.
Related
I want to change the scrollX property of my DataTable to true when switched to mobile but I don't know how to do that, I have tried using media query but it does not seem to work. Any idea?
var mobview = window.matchMedia( "(max-width: 425px)" );
$(document).ready(function() {
var table = $('#datatable').DataTable( {
"scrollX": false,
"bLengthChange": false,
"ajax": "src/json/AttendanceReport.json",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "id" },
{ "data": "FullName" },
{ "data": "DaysPresent" },
{ "data": "DaysAbsent" },
{"data":"DaysLate"}
],
"order": [[1, 'asc']]
} );
if (mobview.matches) {
table.scrollX=true;
}
$(document).ready(function() {
var mobview = window.matchMedia( "(max-width: 425px)" );
var table = $('#datatable').DataTable( {
"scrollX": !mobview.matches,
"bLengthChange": false,
"ajax": "src/json/AttendanceReport.json",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "id" },
{ "data": "FullName" },
{ "data": "DaysPresent" },
{ "data": "DaysAbsent" },
{"data":"DaysLate"}
],
"order": [[1, 'asc']]
});
EDIT
matchMedia() method returns a object that can then be used to determine if the document matches the media query string.
mediaQueryList = window.matchMedia(mediaQueryString)
Where mediaQueryString stores information on a media query.
You can invoke multiple mediaQueryString as well, Let say an example
const mediaQueryList = window.matchMedia('(min-width: Xpx), (max-height: Ypx)');
It will result in output as follows
MediaQueryList {media: "not all, not all", matches: false, onchange: null}
Description of output (MediaQueryList)
media - A DOMString representing a serialized media query.
matches - Bolean (true/False)
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 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
I'm using the datatables plugin and it's working fine for me. However, I'm making multiple calls to populate multiple tables, when I know I could make one AJAX call and store the results in a variable and have each table function use that variable for its data, but I can't get it to work.
I'm using something like to to get the data I need.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
}
})
The idea is to pass all_data variable into my table function (I have several on this one page) without having to make multiple calls. Doing the following returns one column with the letter "a", which isn't right. The data that comes back is JSON coded. I've used the below code, but with the AJAX function as part of the table function:
$("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});
What am I doing wrong here? I'm suspecting I have to prepare all_data somehow, but I'm not sure what that might be.
EDIT: If I console.log the data returned, this is what I get (cut off for brevity):
Object {draw: 0, recordsTotal: 484, recordsFiltered: 484, data: Array[484]}
data: Array[484]
[0 … 99]
0: Array[5]
0: "edu"1: "High School"2: "37.90"3: "49.70"4: "76"length: 5
Your code looks fine, the only thing you need to do is
Assign your datatable to a variable and then in your ajax resolve clear, add data and draw the table.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
table.clear().row.add(all_data).draw(); //clear, add data and draw
}
});
// Assign your datatable to a variable
var table = $("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});
$(document).ready(function () {
var dt = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": "api.php?t=clients",
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
"columns": [{
"className": "details-control",
"data": null,
"defaultContent": " "
}, {
"data": "c_name"
}, {
"data": "c_number"
}, {
"data": "c_link"
}]
});
});
My code throw an error of SQL access violation when I included the following with
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [0] }
]
But if i remove it, everything works fine, basically I just want disable sorting for column 0
How do I achieve it.
Thanks!!
Change "aoColumnDefs" to "columnDefs"
"columnDefs": [{
'bSortable': false, 'aTargets': [0]
}]
make sure you include these script files:
http://code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js