I want to filter 3rd column field as per write in text field. But its not work. And i also want to column filter textfield after table head.
JS
<script type="text/javascript" src="assets/admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="assets/admin/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/admin/js/jquery.datatables.columnfilter.js"></script>
JS
<script>
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bFilter" : true,
//"bServerSide": true,
"aaSorting": [[0,'desc']],
"aoColumns":[{ "bVisible":false, "bSearchable": false, "bSortable": false},
{ "bVisible":true,"bSearchable": true, "bSortable": true , "mRender": rendercheckbox},
{ "bVisible":true,"bSearchable": true, "bSortable": true , "mRender": renderucwords},
{ "bVisible":true,"bSearchable": true, "bSortable": false , "mRender": renderattachment, "sClass": "center"},
{ "bVisible":true, "bSearchable": false, "bSortable": false ,"mRender": renderaction , "sClass": "center"}],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"sAjaxSource":"<?php echo site_url('admins/promotion/getdata');?>"
} ).
columnFilter({
sPlaceHolder: "head:before",
bFilter: false,
aoColumns: [ null,
null,
{ type: "text",
},
null,
null
]
});
});
</script>
Use
$('#example').DataTable( {});
Instead of
$('#example').dataTable( {});
Also check for any javascript error in console
Related
How can i set fixed right column(action) in laravel datatables like this simple example - not work in laravel). Thanks
tableWatches = $('.datatable-watches').DataTable({
orderCellsTop: true,
fixedHeader: false,
dom: "Bfrtip",
"pageLength": 50,
"processing": true,
"serverSide": true,
scrollY: true,
scrollX: true,
scrollCollapse: true,
paging:false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
"ajax": {
url: "/admin/watches/all-watches",
data: {
condition: condition,
}
},
"searchCols": [
.................
],
columns: [
..................
],
});
Method, which created table content
And this part (
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
not worked, without errors and warnings, columns still arent fixed.
Need more explanation!
Totally there is no difference between plain js datatable and yajra/laravel-datatables-oracle.
If you wanna use it locally, just need a 100% with table:
<table id="users" class="table responsive" width="100%"></table>
And a js script to feed datatable by jso data:
$('#users').DataTable({
responsive: true,
"data": [
{
"first_name": "the first name1",
"last_name": "the last name1"
},
{
"first_name": "the first name2",
"last_name": "the last name2"
},
]
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
});
Also for server side feeding datatables, Just use ajax:
$('#users').DataTable({
responsive: true,
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
ajax: {
url: your_post_url_returning_datatable_object_json,
type: 'POST'
},
});
As i mentioned, you can define each column of table or make horizontally scrollable:
scrollX: '100%',
I have below code
With this I see data gets loaded first time and scroll is displayed. But when i hit scroll bar ajax call does not go to server ?
Also once ajax call goes, how to display the json data retuned from server ? I did not get any good example on google related to scrolling with
server side processing ?
function(){
oTable= $('#customerTable').dataTable({
"bJQueryUI": true,
"iDisplayStart":0,
"iDisplayLength": 10,
"bRetrieve": true,
"bServerSide": true,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"aaSorting": [[1,'desc']],
"sScrollY": "600px",
"iScrollLoadGap": 50,
"sAjaxSource": "custom_url",
"ajax" : {
"url" : "custom_url"
"type" : "GET",
"data" : function(d) {
}
},
"aoColumns": [
{"aTargets": [0],"sName":"customer.fullName", "mData": function(response){
return response.customer.fullName;
}, "bSortable": false},
{"aTargets": [1],"sName":"updatedDate", "mData": function(response){
var updateDate = response.updatedDt;
return updateDate;
}, "bSortable": true},
]
"fnDrawCallback": function(oSettings) {
}
});
}
I have this script that works but it totally removes the pagination and display all the data, what I need is just to hide the pagination. any idea ?
I tried this but this is a different approach
how to remove pagination in datatable
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"paging": false,
"ordering": false,
"bLengthChange": false,
"info": false
});
} );
</script>
Set "bPaginate" to false in the datatable configuration.
Try this code:
$('#table_id').dataTable({
"bInfo": false,
"paging": false,
"bPaginate": false,
})
I have this in my datatable, and in my query, i order it by latest creation date, and in datatable i also sort with the date column which is the 16th column in my datatable, but it does not sort according my need.
may i know how to sort the date so that it populate correct information for me?
$(document).ready(function() {
var asInitVals = new Array();
var oTable = $('.datatable').DataTable({
"bProcessing": true,
"oLanguage": {
"sProcessing": "Loading data..."
},
"bSortCellsTop": true,
"iDisplayLength": 10,
"bLengthChange" : false,
"aLengthMenu": {{ Config::get('crud.aLengthMenu') }},
"bServerSide": true,
"bFilter": false,
"aaSorting": [[16, 'desc']],
"sAjaxSource": "{{ url('someurl.ajax') }}",
"columnDefs": [{
"targets": [ 0 ],
"visible": false,
"searchable": false
}]
});
I am using Datatable in my ruby on rails application. I follow the same one which is here..
https://github.com/rweng/jquery-datatables-rails
And My datatable sorting and searching working properly. But I can't see my table tool option (eg - copy, csv, excel, pdf, save ) in my table header.
I want to show my table just like this....
Please help.
i got this by adding ZeroClipboard.js
<script src="http://localhost/assets/js/ZeroClipboard.js"></script>
Update (2016):
Although they are retiring the TableTools for Buttons and Select extensions (source), this is a slightly more recent version of the dom option example:
var oTable = $('#my-table').dataTable({
autoWidth: false,
autoHeight: false,
paging: false,
dom: 'TCfrtip', // <-- Update letters for whichever extensions you want to use
responsive: false,
searching: true,
ordering: true,
stateSave: true,
scrollY: 550,
scrollX: true,
scrollCollapse: true,
fixedHeader: false,
buttons: [
'copyHtml5',
'csvHtml5',
'excelHtml5',
'pdfHtml5'
],
columnDefs: [{
targets: 'no-sort', // disable sorting on class="no-sort"
orderable: false
}],
drawCallback: function (settings) { }
});
Previous Answer (2013):
The solution is to add this:
"sDom": '<"H"TCfr>t<"F"ip>'
Inside your javascript. It will work with show/hide columns nicely as well. If you are not using show/hide columns you can remove the capital "C".
Example (with show/hide columns):
// Users
$("#users-datatable").dataTable({
"bStateSave": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": $('#users-datatable').data('source'),
"bScrollInfinite": true,
"bScrollCollapse": true,
"iDisplayLength": 100,
"sScrollY": "500px",
"sScrollX": "100%",
"sDom": '<"H"TCfr>t<"F"ip>',
"oTableTools": {
"aButtons": [
"copy",
"csv",
"xls",
{
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "Your custom message would go here."
},
"print"
]
}
});
Hopefully this will help someone.