Adding double-click on row for server-side to allow me to serve an editor

Adding double-click on row for server-side to allow me to serve an editor

gutzoftergutzofter Posts: 58Questions: 0Answers: 0
edited April 2010 in General
[code]
var oTable;

$(document).ready(function() {
/* Init the table */
oTable = $("#sku_tbl").dataTable({
bProcessing: true,
bServerSide: true,
sDom: '<"top"i>rt<"bottom"flp<"clear">',
sAjaxSource: "includes/SkuTable.php"
});

/* Click event handler */
$('#sku_tbl tbody tr').live('dblclick', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];

postSelectedRow(iId);
});

function postSelectedRow(sku_id) {
$.get("includes/SkuEdit.php", {
sku_id: sku_id },
function(msg){ $("#sku_container").html( msg );
});
}
});
[/code]

My data for the table is from server-side processing.
When a user double-clicks on a row it will return the first columns data in that row. See:
[code]
var iId = aData[0];
[/code]
My first column is my UID for the MySql table.
[code]
#sku_tbl
[/code]
Is the name of my table in my HTML.

Replies

  • gutzoftergutzofter Posts: 58Questions: 0Answers: 0
    OOPS! on my part. using live killed me. Every time I reloaded the data table it included an additional postSelectedRow event. Changed the live to bind. Fixed Now:
    [code]
    var oTable;

    $(document).ready(function() {

    /* Init the table */
    oTable = $("#sku_tbl").dataTable({
    bProcessing: true,
    bServerSide: true,
    sDom: '<"top"i>rt<"bottom"flp<"clear">',
    sAjaxSource: "includes/SkuTable.php",
    fnDrawCallback: function() {
    clickRowHandler();
    }

    });

    /* Click event handler */
    function clickRowHandler() {
    $('#sku_tbl tbody tr').bind('dblclick', function () {
    var aData = oTable.fnGetData( this );
    var iId = aData[0];

    postSelectedRow(iId);
    });
    }

    function postSelectedRow(sku_id) {
    $.get("includes/SkuEdit.php", {
    sku_id: sku_id
    },
    function(msg){
    $("#sku_container").html( msg );
    });

    }
    });
    [/code]
  • andrewmorenoandrewmoreno Posts: 10Questions: 0Answers: 0
    gutzofter,

    Thanks so much for this example. I was able to use it to link to a "Detail Page" for the selected row. It is working great, thanks again. I am also sending additional filtering parameters from 3 dropdown boxes and drawing the table when any of the values in the dropdown change. Sample code below.

    [code]
    $(document).ready(function() {
    oTable = $('#example').dataTable( {
    "aoColumns": [
    { "sWidth": "24%" },
    { "sWidth": "20%" },
    { "sWidth": "23%" },
    { "sWidth": "19%" },
    { "sWidth": "7%" },
    { "sWidth": "7%" },
    { "bVisible": 0 }
    ],
    "bSort": false,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "ajax.do",
    "fnDrawCallback": function() {
    clickRowHandler();
    },
    "fnServerData": function ( sSource, aoData, fnCallback ) {
    /* Add some extra data to the sender */
    var clientVal = $("#clientVal").val();
    var aeVal = $("#aeVal").val();
    var stateVal = $("#stateVal").val();

    if (clientVal == "0")
    clientVal = "";
    /* Send values from dropdown boxes to server with Ajax call */
    aoData.push( { "name": "sClientSeq", "value": clientVal } );
    aoData.push( { "name": "sAccountExecutive", "value": aeVal } );
    aoData.push( { "name": "sState", "value": stateVal } );
    $.getJSON( sSource, aoData, function (json) {
    fnCallback(json);
    } );
    }
    });

    new FixedHeader( oTable );

    oTable.fnSetFilteringDelay(500);

    oSettings = oTable.fnSettings();

    /* Click event handler */
    function clickRowHandler() {
    /* Highlight selected row on single click */
    $('#example tbody tr').click(function(event) {
    $(oTable.fnSettings().aoData).each(function (){
    $(this.nTr).removeClass('row_selected');
    });
    $(event.target.parentNode).toggleClass('row_selected');
    });

    /* Link to detail page of selected row on double click */
    $('#example tbody tr').bind('dblclick', function () {
    var aData = oTable.fnGetData( this );
    var iId = aData[6];

    detailSelectedRow(iId);
    });
    }

    function detailSelectedRow(propId) {
    location.href='detail.do?id=' + propId;
    }

    $('#clientVal').change(function() {
    oTable.fnDraw();
    });

    $('#aeVal').change(function() {
    oTable.fnDraw();
    });

    $('#stateVal').change(function() {
    oTable.fnDraw();
    });

    } );
    [/code]
  • thePepperthePepper Posts: 1Questions: 0Answers: 0
    Gutzofter, thanks for the code above it helped me out handling the one click event in a way that I can make use of the built in “Select all” and “Deselect all”.
    Here is what I initially used, and I was able to retrieve the array of ids of the selected rows:

    $(document).ready(function() {

    $('#user_inbox_form').submit( function() {
    //var sData = $('input', oTable.fnGetNodes()).serialize();
    if ((rowSelected != "") || (rowSelected != 0)){
    alert( "The following data is submitted to the server: \n\n" + rowSelected );
    return true;
    }
    else{
    $("#feedback").text("Please select one or more documents first!").show().fadeOut(2000);
    return false;
    }
    } );
    // Set table variables defaults
    var oTable = $('#user_inbox_table').dataTable( {
    etc.
    .
    .
    } );

    //Click event handler
    $('#user_inbox_table tbody tr').live('click', function () {
    var aData = oTable.fnGetData( this );
    var iId = aData[0];
    if ( jQuery.inArray(iId, rowSelected) == -1 ){
    rowSelected[rowSelected.length++] = iId;
    }
    else{
    rowSelected = jQuery.grep(rowSelected, function(value) {
    return value != iId;
    } );
    }
    $(this).toggleClass('row_selected');
    } );
    } );

    } ); /* document ready function */

    So with your script, the click and double click handles work fine but:
    - I can never deselect the last clicked row (even if I use the "Deselect all" built in button)
    - How can I retrieve the IDs of the current selected rows? Is it held in an array or nodes that can be serialized?

    Thank you!
This discussion has been closed.