Currently I'm using DataTables in each page initializing them individually like this.
var table = $('#' + '<%= gvReports.ClientID %>').DataTable({
"responsive": true,
"bAutoWidth": true,
"oLanguage": {
"sSearch": "Search Table: ",
"sSearchPlaceholder": "Search records",
"sEmptyTable": "No data available to display"
},
"columnDefs": [
{
"targets": [0],
type: 'natural-nohtml'
}
],
"sScrollY": "55vh",
"scrollCollapse": false,
"pagingType": "full_numbers",
"lengthMenu": [[25, 50, 100, 150, 200], [25, 50, 100, 150, 200]]
});
When I tried to create a generic JQuery method to use in multiple places the type attribute in columnDef is not working properly
"columnDefs": [
{
"targets": [0],
type: 'natural-nohtml'
}
],
Im using NatualSort plugin to sort the data as the column '0' contains alphanumeric data.
Is there a way i can set the columnDefs dynamically? or to set the ColumnDef Type for Column(0) after I initialize the table?
Something Like
table.column("0:visible").Type('natural-nohtml');
Any help is appreciated? I want to know if I'm thinking in right way?
There is no way that you can manipulate columnDefs after the dataTable is initialised. However, when you basically just want to set natural-nohtml as type for the first column for any dataTable, then you could simply extend $.fn.dataTable.defaults. Declare this before you initialise any dataTable :
$.extend( true, $.fn.dataTable.defaults, {
columnDefs: [
{ targets: [0], type: 'natural-nohtml' }
]
} );
This will set any dataTables' first column to type natural-nohtml.
Related
i am trying to setup a true/false filter with the yadcf plugin. As far as i can tell, it works fine and the filtering works fine, until after you have performed a search. At which point the select list is no longer rendered (Even clearing the filter doesn't bring it back) and a page refresh is needed to bring it back.
Here are some screenshots that should help demonstrate the problem.
This is before a search has been performed
This is after a search has been performed
Here is the datatable/yadcf init (I've removed some code for brevity).
_grid.init({
loadingMessage: 'Loading...',
src: _connectionsTable,
dataTable: {
ajax: {
url: _connectionsTable.data('url')
},
columns: [
{
data: 'IsAssigned',
sortable: false,
"render": function (data, type, full, meta) {
return (data === false
? '<span class="label label-sm label-danger"> No </span>'
: '<span class="label label-sm label-success"> Yes </span>');
}
}
],
dom:
"<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
initComplete: function (settings, json) {
var _table = new $.fn.dataTable.Api(settings);
// search options
yadcf.init(_table, [
{
column_number: 11,
data: [{ value: 'true', label: 'Yes' }, { value: 'false', label: 'No' }],
filter_container_id: 'IsAssignedFilter',
filter_reset_button_text: false,
style_class: 'form-control form-filter input-sm'
}
]);
},
order: [
[1, 'desc']
],
responsive: true,
stateSave: true
}
});
The other types of searches seem to be working ok, but this is the first one i have provided static data for. Also Chrome dev tools doesn't show any errors when this happens.
Any help is appreciated!
You should not init yadcf in initComplete , instead do it after you init datatables, like this:
var oTable = $('#example').DataTable({...});
yadcf.init(oTable, [{column_number: 0}]);
In My website I am using data tables for display data. Now The issue is If there are 10 records than the default pagination is not display but when there are more than 10 records the pagination of data table should display.
This is how I initialize datatable
$(document).ready(function(){
$('#tbl_member').dataTable({
"iDisplayLength": 10,
"bAutoWidth": false,
"aoColumnDefs": [
{"bSortable": true, "aTargets": [0,2]}
]
});
});
This datatable code is when I done server side processing:-
var save_method;
var table;
$(document).ready(function() {
table = $('#table').DataTable({
oLanguage: {
sProcessing: "<img src='<?php echo base_url();?>assets/img/loader.gif'>"
},
"processing": true,
"serverSide": true,
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo base_url();?>Technology/technology_list",
"type": "POST"
},
"columnDefs": [
{
"targets": [ -1 ],
"orderable": false,
},
],
});
});
Use bPaginate (old hungarian notation style) or paginate to turn pagination on or off. You can use expressions to determine the options :
$('#tbl_member').dataTable({
"bPaginate" : $('#tbl_member tbody tr').length>10,
"iDisplayLength": 10,
"bAutoWidth": false,
"aoColumnDefs": [
{"bSortable": true, "aTargets": [0,2]}
]
});
This works in both 1.9.x and 1.10.x versions of dataTables. Demo showing two tables with the one having less than 10 records, the other a lot more -> http://jsfiddle.net/t2xcfLap/3/
Hide pagination controls after an AJAX update. Assuming the JSON reponse is on the form
{
"draw": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
[...],
]
}
then
table.on('xhr', function(e, settings, json, xhr) {
if (json.recordsTotal<10) {
$("#example_paginate").hide();
$("#example_length").hide();
} else {
$("#example_paginate").show();
$("#example_length").show();
}
})
demo -> http://jsfiddle.net/yyo5231z/
The injected controls is named on the form <tableId>_length, <tableId>_paginate. So if your table have the id table, then the above should be $("#table_paginate").hide(); and so on.
The reason for the different approach compared to the first answer with a static table is, that you cannot change pagination on the fly without re-initialising the table.
I have an on click function storing the row data in the console log
if you click on the first two columns, you'll notice the function returns undefined, however any of the unfrozen columns returns the data object
I know that this has todo with the fact that the fixedcolumns are created in a cloned table, i was wondering if there was any workaround to this?
// Server-side processing with object sourced data
var $table;
$(document).ready(function() {
$table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "/ssp/objects.php",
dom: "<'row'<'col-md-6 'l><'col-md-6 pull-right'>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
],
scrollY: "600px",
scrollX: "100%",
scrollCollapse: true,
"pageLength": 5,
lengthMenu: [[5, 10, 25, 50 ], [5, 10, 25, 50]],
order: [[ 1, "asc" ]],
} );
new $.fn.dataTable.FixedColumns( $table, {
leftColumns: 2
} );
$table.on("click", "tr",function(){
var aData = $table.row( this ).data();
console.log( aData);
} );
} );
here is my example code in action
You can use fnGetPosition to get information about row index.
From the manual:
This function is functionally identical to fnGetPosition in
DataTables, taking the same parameter (TH, TD or TR node) and
returning exactly the the same information (data index information).
The difference between the two is that this method takes into account
the fixed columns in the table, so you can pass in nodes from the
master table, or the cloned tables and get the index position for the
data in the main table.
Your code needs to be modified as follows:
var fc = new $.fn.dataTable.FixedColumns( $table, {
leftColumns: 2
});
$table.on("click", "tr", function(){
var aData = $table.row(fc.fnGetPosition(this)).data();
console.log(aData);
});
See this example code for demonstration.
I am trying to fix column width instead of dataTable choosing it automatically , hence i am trying to set sWidth but its not applying. Following is my code,
$(document).ready(function(){
$('#Emp_table').dataTable()
.columnFilter({
aoColumns: [ {type:"text"},
{ type: "text" },
{ type: "select",bSmart: false,"sType": "string", "sWidth": "5%" },
{ type: "select" },
{ type: "select" },
{ type: "select"},
{ type: "select" },
{ type: "select" }
],
});
});
Here all works fine like filter by text or value except the column width, because of that the table length is extending beyond my page. Even though my first value is ID which is not even more than 3 digits the width takes for around 10 characters . Not only sWidth, even bSmart i am trying to false but still it works with smart filter .
You need to set http://datatables.net/reference/option/autoWidth to false
Also it looks like you're creating your table a bit oddly.
For datatables 1.10 use:
$('#Emp_table').DataTable({
'columns': [
{"type": "string", "width": "5%" },
// etc...
],
'autoWidth': false,
})
i am searching some data in the rows dynamically....so for this i hav used "dojox/grid/enhanced/plugins/Search .... but i am not getting any icon of search and i don't know how to use this plz suggest here is my code
grid = new EnhancedGrid({
id:'grid',
store : yourStore,
structure : layout,
rowSelector: '20px',
plugins: {
search:true,
pagination: {
pageSizes: ["50","100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 2,
position: "bottom"
},
filter: {
closeFilterbarButton: true,
ruleCount: 5,
itemsName: "rows"
}
}
});
grid.placeAt("myGrid");
grid.startup();
It's shown here. Just look at the source.