select rows not working in fixed column

select rows not working in fixed column

hvmhvm Posts: 26Questions: 0Answers: 0
edited December 2013 in TableTools
hi,
i m new with this datatables. Please help me I m stuck in one functionality.

In my requirement i want fixed column and its done perfectly. Now i want select and deselect rows this functionality is working only scrollable columns for fixed columns its not working. PLease help me how to resolve this.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Datatabedotnetexample._Default" %>



















var oTable;
$(document).ready(function () {

oTable = $('#myDataTable').dataTable
({

//"sDom": 'T<"clear">lfrtip',
//"sDom": 'C<"top"lp<"clear">>rt<"bottom"i<"clear">>T',

"sDom": 'CT<"clear">lfrtip',
"oTableTools": {
"sRowSelect": "multi",
"aButtons": ["select_all", "select_none"]
},
"oColVis":
{
"activate": "mouseover",
"buttonText": "Change columns",
"aiExclude": [0, 1]

},
"oColReorder": {
},

"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": true,
//"sScrollY": "200px",
//"bPaginate": false,
"bStateSave": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bJQueryUI": false,
"bLengthChange": true,
"bServerSide": true,
"sAjaxSource": "Default.aspx/binddata",
"fnServerData": function (sUrl, aoData, fnCallback, oSettings) {
var data1 = JSON.stringify(aoData);
$.ajax({
type: "POST",
url: sUrl,
contentType: 'application/json',
dataType: 'json',
data: "{'Collection': '" + data1 + "'}",
success: function (json) {

var s = $.parseJSON(json.d);
fnCallback(s);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText)
}
});
},

"aoColumns": [
//Assign the data to rows
{"mDataProp": "ID",
"fnRender": function (obj, val) {
return "" + obj.aData.ID + "";
}
},
{ "mDataProp": "Name"
, "fnRender": function (obj, val) {
return "";
}
},
{ "mDataProp": "Address" },
{ "mDataProp": "Town" },
{ "mDataProp": "Country" },
{ "mDataProp": "Email" },
{ "mDataProp": "Gender" },
{ "mDataProp": "Phone", "bVisible": false }
]
});
new FixedColumns(oTable, {
"sLeftWidth": 'relative',
"iLeftColumns": 2,
"iLeftWidth": 30
});
oTable.fnAdjustColumnSizing();

// *** FIX WIDTHS ON LEFT SIDE ***
var widths = [];

// first fix widths on tbody ...
$('.DTFC_LeftBodyWrapper thead th').each(
function () {
$(this).css('width', $(this).width());
});

// ... now save the actual widths on array
$('.DTFC_LeftBodyWrapper thead th').each(
function () {
widths.push($(this).width());
});

// ... now update widths on thead
$('.DTFC_LeftHeadWrapper thead th').each(
function (i, val) {
console.log('i:', i, ', width:', widths[i]);
$(this).css('width', widths[i]);
});

$("#dialog").dialog({
autoOpen: false,
width: 600,
buttons: [
{
text: "Ok",
click: function () {
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}
]
});

$(".myClass").live('click', function (event) {
//$( "#dialog" ).dialog( "open" );
$("#dialog").html('').dialog("open");
$("#modalIframeIdaprv").attr("src", "Testpopup.aspx");
//return false;
event.preventDefault();
});

});


function closepopup() {
$("#dialog").dialog('close');
}

<%--





--%>





ID


Company name


Address


Town


Country


Email


Gender


Phone










<%--/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') input', tr).val();
} );
}

/* Create an array with the values of all the select options in a column */
$.fn.dataTableExt.afnSortData['dom-select'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') select', tr).val();
} );
}

/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') input', tr).prop('checked') ? '1' : '0';
} );
}

/* Initialise the table with the required column sorting data types */
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text", "sType": "numeric" },
{ "sSortDataType": "dom-select" },
{ "sSortDataType": "dom-checkbox" }
]
} );
} );--%>

Replies

  • allanallan Posts: 54,703Questions: 1Answers: 8,556 Site admin
    You need to use the FixedColumns fnUpdate method to tell FixedColumns to redraw with the updated table information: http://datatables.net/docs/FixedColumns/2.0.3/#fnUpdate

    Allan
  • hvmhvm Posts: 26Questions: 0Answers: 0
    hi allan,
    it's not working..even fixed column functionality not working with this fnUpdate.
  • haffoudhihaffoudhi Posts: 3Questions: 0Answers: 0
    edited March 2014
    Ok, This is a code to help people in this issue
    [code]
    var oTable; // This is the variable associated with your datatable
    var gaiSelected = []; // This is initialisation should be done before "$(document).ready( function () {"
    var ua = navigator.userAgent,
    event = (ua.match(/iPad/i)) ? "touchstart" : "click"; // This 2 lines to make it work on iPAD too.
    $('#datatable_wrapper table tr').live(event, function () {
    // datatable in "#datatable_wrapper" is the name of the class associated with your table.
    var aData = oTable.fnGetData( $(this).index()+1 );
    var iId = aData[0]; // change 0 with the name of the column you need to grab its data
    if ( jQuery.inArray(iId, gaiSelected) == -1 )
    {
    gaiSelected[gaiSelected.length++] = iId;
    }
    else
    {
    gaiSelected = jQuery.grep(gaiSelected, function(value) {
    return value != iId;
    } );
    }
    var trIndex = $(this).index()+2;
    $("#datatable_wrapper table").find("tr:eq("+(trIndex)+")").toggleClass("row_selected");
    // "row_selected" is a class, it needs to be added to your css with some specific background-color
    oTable.fnDraw(false); // This line is needed to hover the correct line
    } );
    [/code]

    That's it.
  • hvmhvm Posts: 26Questions: 0Answers: 0
    hi haffoudhi,

    its also not working, if fixed column functionality would be removed than select deselect all rows working but if added this fixed column functionality than it would not be working.
  • haffoudhihaffoudhi Posts: 3Questions: 0Answers: 0
    Update:

    [code]
    var oTable; // This is the variable associated with your datatable
    var gaiSelected = []; // This is an array where we are going to save our checked data
    var ua = navigator.userAgent,
    event = (ua.match(/iPad/i)) ? "touchstart" : "click"; // This 2 lines to make it work on iPAD too.
    $('#datatable_wrapper table tbody tr').live(event, function () {
    // datatable in "#datatable_wrapper" is the name of the id associated with your table.
    var iId = $(".DTFC_LeftWrapper:first tr:eq("+($(this).index()+2)+") td:eq(0)").text(); // Here i m extracting the data from the fixed column
    if ( $(this).hasClass("row_selected") == false )
    {
    gaiSelected[gaiSelected.length++] = iId;
    }
    else
    {
    gaiSelected = jQuery.grep(gaiSelected, function(value) {
    return value != iId;
    } );
    }
    var trIndex = $(this).index()+2;
    $("#datatable_wrapper table").find("tr:eq("+(trIndex)+")").toggleClass("row_selected");
    // "row_selected" is a class, it needs to be added to your css with some specific background-color
    oTable.fnDraw(false); // This line is needed to hover the correct line
    } );
    [/code]

    Try this out. I ve made some changes. Then leave your comment. I may help you in this issue.
  • hvmhvm Posts: 26Questions: 0Answers: 0
    edited March 2014
    hi,

    its also not working. PLease see below code so you can get better idea.
















    var oTable;
    var gaiSelected = []; // This is initialisation should be done before "$(document).ready( function () {"
    $(document).ready(function () {

    oTable = $('#myDataTable').dataTable
    ({
    "sDom": 'CT<"clear">lfrtip',
    "oTableTools": {
    "sRowSelect": "multi",
    "aButtons": ["select_all", "select_none"]
    },
    "oColVis":
    {
    "activate": "mouseover",
    "buttonText": "Change columns",
    "aiExclude": [0, 1]

    },
    "oColReorder": {
    },
    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "bScrollCollapse": true,
    "bPaginate": true,
    "bStateSave": false,
    "sPaginationType": "full_numbers",
    "bAutoWidth": true,
    "bJQueryUI": false,
    "bLengthChange": true,
    "bServerSide": true,
    "sAjaxSource": "Default.aspx/binddata",
    "fnServerData": function (sUrl, aoData, fnCallback, oSettings) {
    var data1 = JSON.stringify(aoData);
    $.ajax({
    type: "POST",
    url: sUrl,
    contentType: 'application/json',
    dataType: 'json',
    data: "{'Collection': '" + data1 + "'}",
    success: function (json) {

    var s = $.parseJSON(json.d);
    fnCallback(s);
    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
    alert(xmlHttpRequest.responseText);
    }
    });
    },

    "aoColumns": [
    //Assign the data to rows
    {"mDataProp": "ID"
    //,"fnRender": function (obj, val) {
    //return "" + obj.aData.ID + "";
    //return "";
    //}
    },
    { "mDataProp": "Name"
    //, "fnRender": function (obj, val) {
    //return "";
    //}
    },
    { "mDataProp": "Address" },
    { "mDataProp": "Town" },
    { "mDataProp": "Country" },
    { "mDataProp": "Email" },
    { "mDataProp": "Gender" },
    { "mDataProp": "Phone", "bVisible": false }
    ]
    });
    var oFC = new FixedColumns(oTable, {
    "iLeftColumns": 2,
    "iLeftWidth": 10
    });

    //var oTable; // This is the variable associated with your datatable

    var ua = navigator.userAgent,
    event = (ua.match(/iPad/i)) ? "touchstart" : "click"; // This 2 lines to make it work on iPAD too.
    $('#myDataTable table tbody tr').live(event, function () {
    debugger;
    // datatable in "#datatable_wrapper" is the name of the id associated with your table.
    var iId = $(".DTFC_LeftWrapper:first tr:eq(" + ($(this).index() + 2) + ") td:eq(0)").text(); // Here i m extracting the data from the fixed column
    if ($(this).hasClass("row_selected") == false) {
    gaiSelected[gaiSelected.length++] = iId;
    }
    else {
    gaiSelected = jQuery.grep(gaiSelected, function (value) {
    return value != iId;
    });
    }
    var trIndex = $(this).index() + 2;
    $("#myDataTable table").find("tr:eq(" + (trIndex) + ")").toggleClass("row_selected");
    oTable.fnDraw(false); // This line is needed to hover the correct line
    });


    $(".myClass").live('click', function (event) {
    //$( "#dialog" ).dialog( "open" );
    $("#dialog").html('').dialog("open");
    $("#modalIframeIdaprv").attr("src", "Testpopup.aspx");
    //return false;
    event.preventDefault();
    });

    });


    function closepopup() {
    $("#dialog").dialog('close');
    }

    <%--





    --%>





    ID


    Company name


    Address


    Town


    Country


    Email


    Gender


    Phone
This discussion has been closed.