I'm trying to create a row inside my datatable that increments +1 each row. I've been told the easiest way to do this would be using fnRender. Now I've used fnRender to change data that's already in a column from the serverside processor, but never to create a new column alone.
Any help would be awesome!
Here's my current code:
oTable = $('#testingz').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [ [1,'desc'] ],
"sDom": '<""l>rt<"F"fp>',
"sAjaxSource": "server_processing.php",
"aoColumnDefs": [
{
"fnRender": function ( o, val ) {
return '' + o.aData[0] + '';
},
"aTargets": [ 0 ]
}
]
});
Do you mean something like this: http://datatables.net/release-datatables/examples/api/counter_column.html
Related
I am using jquery datatables(1.10.9) with server side processing.
tab = $('#'+div).dataTable( {
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
"sPaginationType": "full_numbers",
"sScrollY": "550px",
"sScrollX": "100%",
"bFilter": true,
"aoColumnDefs": [{ "bSearchable": false, "aTargets": [ 2 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 12 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 13 ] }],
"oTableTools": {},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'data/getdata',
"fnServerParams": function ( aoData ) {
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ){
// Processing data like:
// $('td:eq(2)', nRow ).html( 'Test' );
}
});
// Hiding 5th column
tab.fnSetColumnVis( 5, false); //Does not work.Removes the column header but not the row data.
How do I get hide column to work properly with server side processing in jquery datatables?
I got this to work as follows:
fnDrawCallback: function() {
$('td:nth-child(3),th:nth-child(3)').hide();
}]
tab.fnSetColumnVis( 3, false) will not work because it re-fetches the data.Hence, had to do it using simple old jquery.
fnSetColumnVis() function has 3rd property (true or false) that not rebind the data. so try with fnSetColumnVis(3,false,flase) may be it can help.
You do it when you set up the datatable, using "ColumnDefs" thusly, where targets is the number of the column you want to hide:
tab = $('#'+div).dataTable( {
"columnDefs": [{ targets: 5, visible: false }],
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
...
If you have 2 hidden columns, it will look like this:
"columnDefs": [{ targets: 5, visible: false }, { targets: 6, visible: false }],
Note: column numbering starts at 0.
I've created a dataTable. I'm receiving about 13 data from the database. I've also declared a global variable and assigning it's value inside the dataTable in mRender event. But, the problem is I cannot bring it out of that. This is how I've tried:
var total_amount = 0;
function year_month(year_month) {
jQuery("#table").dataTable({
"sAjaxSource": "request-db.php?mode=dataTable&year_month=" + jQuery("#year_month").val(),
"bDestroy": true,
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bSort": false,
"aoColumnDefs": [
{
"aTargets": [0],
"mRender": function(data, type, row) {
total_amount = row[14];
alert(total_amount);
return '' + row[0] + '';
}
}
]
});
}
alert("total"+total_amount);
});
In the first alert, I'm getting the correct value, but in the second alert I get 0(to which I've initialized). How can I get that outside the dataTable? What should I do?
I am using datatables inbuilt search but for large data it is taking time to appear search text box, i want to implement search text box above the table so that it comes early than the table.
code:
$('#example').dataTable( {
"sPaginationType": "full_numbers",
"bStateSave": false,
"iDisplayLength": 100,
"deferRender": true,
"sDom": '<"H"lfr>t<"F"ip>',
aoColumnDefs: [
{
bSortable: false,
aTargets: [ -1,-2 ]
}
]
} );
Is it possible to change datatable column settings value on fly.I need to hide some columns dynamically while invoking some methods.Already try something like this:
var columns = [{ "bVisible": true, "sTitle": "Date" },
{"bVisible": true, "sTitle": "Time" }];
var myTable= $('#myTable').dataTable({
"bPaginate": false,
"bFilter": true,
"sScrollY": "150px",
"bRetrieve": true,
"bProcessing": false,
"bServerSide": false,
"aoColumns": columns,
'bAutoWidth': false,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
},
});
for(var i=0; i<10; i++ {
myTable.fnAddData(['xxxx','yyyy']);
}
$("#hideDate").change(function() {
myTable.fnSettings().aoColumns[0].bVisible = false;
});
After calling hideDate change method I am getting this js error
TypeError: o.aoColumns[iVis] is undefined
nThs[i].style.width = o.aoColumns[iVis].sWidth;
Please give some idea to fix this problem.
I need to change datatable columns visibility dynamically.
Regards,
Prasath M
There is a datatables plugin that has been created for this, ColVis. If you don't want to use the plugin, you could look at the source code and see how they did it.
In my Asp.net app, I have a Gridview Control and bind it on code behind.
And on client side I use Jquery DataTable version 1.9.4 for better Sorting,Searching functionality, Here i got one problem Numeric value not sorting properly.
I googled and come to knw by using sType": "numeric" will solved, but when i use this my whole working stoped my Column is at 9 position so i set aTragets 9
Here's the JS FIDDLE
Javascript:
$(document).ready(function () {
$('#ctl00_ContentPlaceHolder1_GridView3').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
// "aoColumnDefs": [{ "sType": "numeric", "aTargets": [9] }]
});
});
Code nehind:
On Page_PreRender
if (GridView3.Rows.Count > 0)
{
GridView3.UseAccessibleHeader = true;
GridView3.HeaderRow.TableSection = TableRowSection.TableHeader;
}
On pageLoad :
GridView3.DataSource = sortedDT;
GridView3.DataBind();
I think aaSorting is what you have to use
$(document).ready(function () {
$('#ctl00_ContentPlaceHolder1_GridView3').dataTable({
"aaSorting": [[ 9, "asc"]], /*row count starts from 0 in datatables*/
"bJQueryUI": true,
"sPaginationType": "full_numbers"
// "aoColumnDefs": [{ "sType": "numeric", "aTargets": [9] }]
});
});
UPDATE
The problem was as stated in my comment It clearly does not understand the numeric datatype of the column. Your problem is that inside your ... you had also text.
See a working fiddle http://jsfiddle.net/6Pxwy/1
This is how i solved:
Gridview with Item template:
In Item template their might be label control, so it convert into span, we need to remove that span tag ie html tag using .contents().unwrap();
Code:
$("#Gridview_ID span").contents().unwrap();
$('#Gridview_ID ').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [{ "bSortable": false }, null, null, { "sType": "numeric" }, { "sType": "date" }, null, { "bSortable": false}]
});
Gridview with Bound Field:
$('#Gridview_ID ').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [{ "bSortable": false }, null, null, { "sType": "numeric" }, { "sType": "date" }, null, { "bSortable": false}]
});