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,
})
Related
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 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
Below is my code
onSelectRow : function(id) {
$("#order_list").setGridParam({
'editurl' : 'clientArray'
});
}
});
jQuery("#order_list").jqGrid('navGrid',"#pjmap",{edit:false,add:false,del:false,search: false, refresh:false,cloneToTop:true});
jQuery("#order_list").jqGrid('inlineNav', '#order_list_toppager',{add:false,del:false,edit:true,search: false, refresh:false,cloneToTop:true, viewtext:"View", edittext:"Edit", savetext:"Save", canceltext:"Cancel"});
Hei
You can create your own functions for saving by adding a function in parameters for aftersavefunc. My code is like this:
$('#jqGridOutput').navGrid("#jqGridPagerOutput", { edit: false, add: false, del: true, refresh: false, view: false }, {}, {}, delSettings);
$('#jqGridOutput').inlineNav('#jqGridPagerOutput',
{
edit: true,
del: true,
add: true,
cancel: false,
editParams: {
aftersavefunc: function (id) { //what should happen on save edit row },
keys: true,
},
addParams: {
keys: true,
position: "last",
aftersavefunc: function (id) { //what should happen on save new row }
},
});
I think, this is what you are looking for if i understand you correctly?
My JavaScript looks as follows:
$(document).ready(function () {
oTable = $('#ecTable').dataTable({
"sScrollY": "580px",
"sScrollX": "600px",
"bPaginate": false,
"bScrollCollapse": true,
"bProcessing": true,
"bInfo": true,
"aaSorting": [[0, 'desc']]
});
});
And the resulting table looks as follows:
As you can see, something isn't right. I can't seem to get DataTables to actually display the X scroll bar.
Try this..
"sScrollXInner": "100%",
"sScrollX": "100%"
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.