Add action buttons/hyperlinks on each row on first column
Add action buttons/hyperlinks on each row on first column
This is how my table looks like right now:
Id | FirstName | LastName | Action | Links
--------------------------------------------
18| John | Doe | E - D | Link 1 Link 2
19| Jane | Doe | E - D | Link 1 Link 2
E = icon for edit
D = icon for delete
I want to move my action and link buttons to the front, placing them before the Id column.
Looking like this:
Action | Links | Id | FirstName | LastName
-------------------------------------------
| E - D | Link 1 Link 2 | 18 | John | Doe
| E - D | Link 1 Link 2 | 18 | Jane | Doe
E = icon for edit
D = icon for delete
Im using aoColumnDefs on my current setup and it looks something like this:
[code]
"aoColumnDefs": [
{
fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 3 ]
},
,
{
"fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 4 ]
}
] [/code]
I have tried to change the aTargets to [ 0 ] and [ -1 ] but it just overwrites the value of current columns, when I use [ 0 ] for Action column and [ 1 ] for my Links column for example then the value of column Id and FirstName is overwritten by my buttons.
Ending up like this:
Action | Links | LastName
-------------------------------------------
| E - D | Link 1 Link 2 | Doe
| E - D | Link 1 Link 2 | Doe
E = icon for edit
D = icon for delete
How can I add two columns with buttons to my table and move the other columns to the right of these two columns, rather than overwriting columns.
This is what I want to achieve:
Action | Links | Id | FirstName | LastName
-------------------------------------------
| E - D | Link 1 Link 2 | 18 | John | Doe
| E - D | Link 1 Link 2 | 18 | Jane | Doe
E = icon for edit
D = icon for delete
Id | FirstName | LastName | Action | Links
--------------------------------------------
18| John | Doe | E - D | Link 1 Link 2
19| Jane | Doe | E - D | Link 1 Link 2
E = icon for edit
D = icon for delete
I want to move my action and link buttons to the front, placing them before the Id column.
Looking like this:
Action | Links | Id | FirstName | LastName
-------------------------------------------
| E - D | Link 1 Link 2 | 18 | John | Doe
| E - D | Link 1 Link 2 | 18 | Jane | Doe
E = icon for edit
D = icon for delete
Im using aoColumnDefs on my current setup and it looks something like this:
[code]
"aoColumnDefs": [
{
fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 3 ]
},
,
{
"fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 4 ]
}
] [/code]
I have tried to change the aTargets to [ 0 ] and [ -1 ] but it just overwrites the value of current columns, when I use [ 0 ] for Action column and [ 1 ] for my Links column for example then the value of column Id and FirstName is overwritten by my buttons.
Ending up like this:
Action | Links | LastName
-------------------------------------------
| E - D | Link 1 Link 2 | Doe
| E - D | Link 1 Link 2 | Doe
E = icon for edit
D = icon for delete
How can I add two columns with buttons to my table and move the other columns to the right of these two columns, rather than overwriting columns.
This is what I want to achieve:
Action | Links | Id | FirstName | LastName
-------------------------------------------
| E - D | Link 1 Link 2 | 18 | John | Doe
| E - D | Link 1 Link 2 | 18 | Jane | Doe
E = icon for edit
D = icon for delete
This discussion has been closed.
Replies
When you say that, do you mean you have aoColumns also defined? Can you show us that as well please? Using mRender ( fnRender is deprecated and shouldn't be used) it should be quite possible to do what you are looking for.
Are you using Editor for these actions, or are they custom actions?
Allan
This is how my code looks like:
[code]
var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#sales').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bDeferRender": true,
"bSortClasses": false,
"sScrollX": "100%",
"sScrollXInner": "150%",
"fnInitComplete": function () {
new FixedColumns( oTable, {
"iLeftColumns": 5,
"iLeftWidth": 350
} );
},
"bScrollCollapse": true,
"aaSorting":[[0, "desc"]],
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oScroller": {
"loadingIndicator": false
},
"sAjaxSource": "datatablesconnect.php",
"fnServerData" : function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "bekraftat", "value": "<?php echo isset( $_GET['bekraftat'] ) ? $_GET['bekraftat'] == "nej" : ''; ?>" } ),
aoData.push( { "name": "bekraftade", "value": "<?php echo isset( $_GET['bekraftade'] ) ? $_GET['bekraftade'] == "ja" : ''; ?>" } ),
aoData.push( { "name": "annullerade", "value": "<?php echo isset( $_GET['annullerade'] ) ? "ja" : ''; ?>" } ),
aoData.push( { "name": "raderade", "value": "<?php echo isset( $_GET['raderade'] ) ? $_GET['raderade'] == "ja" : ''; ?>" } );
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
} );},
"oLanguage": {
"sUrl": "datatables/media/language/sv.txt"
},
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 7 ]
},
{
"fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 8 ]
}
]
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
} );
[/code]
> when I use [ 0 ] for Action column and [ 1 ] for my Links column for example then the value of column Id and FirstName is overwritten by my buttons.
That is correct - that is how fnRender works and one of the many reasons it hit the bin in v1.10! Its rubbish basically :-).
Use mRender instead!
Allan
Thanks in advance
[code]
mRender: function ( data, type, row ) {
return return '';
}
[/code]
Allan