select rows not working in fixed column
select rows not working in fixed column
hvm
Posts: 26Questions: 0Answers: 0
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" }
]
} );
} );--%>
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
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" }
]
} );
} );--%>
This discussion has been closed.
Replies
Allan
it's not working..even fixed column functionality not working with this fnUpdate.
[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.
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.
[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.
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