Add action buttons/hyperlinks on each row on first column

Add action buttons/hyperlinks on each row on first column

asdrenasdren Posts: 20Questions: 0Answers: 0
edited September 2013 in General
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

Replies

  • allanallan Posts: 63,383Questions: 1Answers: 10,449 Site admin
    > it just overwrites the value of current columns

    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
  • asdrenasdren Posts: 20Questions: 0Answers: 0
    edited September 2013
    No I have not used aoColumns only aoColumnDefs and I'm not using Editor for these actions, these are custom actions.
    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]
  • allanallan Posts: 63,383Questions: 1Answers: 10,449 Site admin
    Okay I think I'm understanding a little more. So the above code works does it? But when you set the targets to be 0 and 1 it overwrites the values - based on this:

    > 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
  • asdrenasdren Posts: 20Questions: 0Answers: 0
    Thanks Allan, but could you please show me how my code would look like with mRender instead of fnRender. Making my two custom columns display in front instead of the way its now.

    Thanks in advance
  • allanallan Posts: 63,383Questions: 1Answers: 10,449 Site admin
    Its very similar:

    [code]
    mRender: function ( data, type, row ) {
    return return '';
    }
    [/code]

    Allan
This discussion has been closed.