Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all 1816 articles
Browse latest View live

Getting value from hidden row column

$
0
0
I have 7 columns in my datatable with 2nd column is invisible and storing Message Id. 3rd column is a checkbox which is visible and i am storing Message Id value there too. Currently when someone checks checkbox i am collecting Message Id value from the checkbox but i don't want to store Message Id value in checkbox instead would like to collect it from the invisible second column.I want to do that in my function event.

function saveCheckedMessages(){
var msgIds = new Array();
$("#tblInbox td input[type=checkbox]:checked").each(function () {
msgIds.push(convertStringToInt($(this).val()));
});
}

How can i achieve that?
here's the link for Datatable
http://debug.datatables.net/ecevic

FnDeleteRow() using <TR> ID

$
0
0
This forum is AWESOME and I learn so much about DataTables reading through it.

I am using Datatables Version: 1.9.3 and trying to get the fnDeleteRow logic to work appropriately to delete a row by a table's row "id" attribute.

The line that I have been using that works appropriatey SOME of the time is as follows.
oDataTable.fnDeleteRow($('#' + sTestTrackIDs)[0]);
where sTestTrackIDs is the table's row (<tr>) ID.

This will work most of the time but I receive the error stating "'nTR' is null or not an object" once I believe to delete the first row of the table.

I have a good idea that the error is caused from deleteing the first row of the table and then the index internally to datatables is being corrupted.
There shouldn't be over a 100 rows on the table so I would be happy to loop through the table to search for the ID and then delete it appropriately but am struggling with how to do that.

Thanks in advance for any help on this!!!

--Gary

only first strings are shown when using sAjaxSource and custom JSON

$
0
0
Hello.
I'm using custom JSON as Ajax source and the problem is that only first string from each row is printed into the table.

Screenshot of the final rendered table: https://www.dropbox.com/s/d4zhklk1p14fphf/Screenshot 2014-01-10 13.39.33.png
Sorry for the screenshot, my web is in localnet without access from the outside.

Can someone tell my what is wrong? Thank you in advance.

My JSON:
{
   "Sortlist" : null,
   "Comments" : null,
   "Options" : null,
   "Nameservers" : [
      "192.168.4.254",
      "62.168.96.4",
      "8.8.8.8"
   ],
   "Domain" : null,
   "Searchlist" : [
      "in.example.com"
   ]
}

And table code and initialization sequence:
<table id="table-dnsdata" class="table table-bordered table-striped table-hover dataTable">
	<thead>
		<tr>
			<th >Nameservers</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

$('#table-dnsdata').dataTable(		{
   "sAjaxSource" : "dns_data.json",
   "sAjaxDataProp" : "Nameservers",
   "oLanguage" : {
      "sUrl" : "/assets/js/dataTables-en.UTF-8.txt"
   }

Column Size settings are not working

$
0
0
I'm working in v 1.9.4 and using jQuery UI v 1.10.3.

I have searched all over for an answer to this and nothing I'm finding is working.

I have a page that uses UI tabs. In that tab is a button that does an ajax call for new tables. The call returns fully formatted html tables that are then appended to a div on the page inside the tab using jQuery and then have the dataTable initialize called on the new table. The table is never hidden so that should not be an issue here. That all works great but then when I try to set the width of the columns nothing happens its like its getting over written or ignored. Here's my code.

HTML
<table id="toBeStarted">
                    <thead>
                        <tr>
                          <th>1</th>
                          <th>2</th>
                          <th>3</th>
                          <th>4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                          <td>Data 1</td>
                          <td>Data 2</td>
                          <td>Data 3</td>
                          <td>Data 4</td>
                        </tr>
                    </tbody>
</table>

JS
$('#myprojects').on('click',function(){
		$('#userprojects').val($('#myprojects').data('myid'));
		$.ajax({
			type: 'POST',
			url: 'myservice.php',
			cache:false,
			data: {userID: $('#myprojects').data('myid') },
			dataType: 'json',
			success: function(data, textStatus){
				if(data.error){
					alert(data.error_msg);
				}
				else{
					$('#tables').empty();
					$('#tables').append(data.que);
					var toBeStartedTabel = $('#toBeStarted').dataTable({"bAutoWidth": false,
																		"sScrollX": "100%",
																		"aoColumns": [ 
																			/*id*/{ "sWidth": "50px"},
																			/*client*/{ "sWidth": "100px"},
																			/*project*/null,
																			/*period*/null,
																			/*priority*/null,
																			/*in*/null,
																			/*due*/null,
																			/*Note*/{ "sWidth": "100px"}
																		]
																		});
																		
					toBeStartedTabel.fnAdjustColumnSizing();
					$('#tables').append(data.inprocess);
					var inprocessTabel = $('#inProcess').dataTable();
					$('#tables').append(data.rework);
					var inprocessTabel = $('#rework').dataTable();
					$('#tables').append(data.review);
					var inprocessTabel = $('#review').dataTable();
				}
			},
			error: function(xhr, textStatus, errorThrown){
				alert(errorThrown);
				alert(xhr.responseText);
				//alert(Object.keys(xhr));
			}
		});	
	});

I have tried just about every solution on these forms and stack overflow with no luck.

Thank you

UPDATE: It appears that any and all setting in the dataTable function call is being ignored. I just tried to add aaSorting to the call and its being ignored as well. Can anyone shed some light on this please.

Problem in datatable when column count is greater

$
0
0
I was trying to look for datatable for fixed left columns, header and scrolling feature. My requirement is that we have to fix the width of datatable to suppose 900px and it has fixed column count of 3, and total non-fixed columns are 25 out of there we have to display only 5 columns during scrolling. Like if we scroll left to right then if 2 columns are hidden to left then 2 more columns should be added to the right but all the time total visible non-fixed column should be 5.
Please let me know how can we configure datatable to meet my requirement.

Right now, when i configure it then the browser scroller is also displayed at the bottom along with table scroller. I do not want to display browser scroller because i have 3 fixed columns and if i scroll using browser scroller to the right then the fixed columns are made hidden.
So the concept of fixed column goes away that datatable supports.

Thanks

Get DataTable settings

$
0
0
Hello, I'm having problems find out how to get settings of some datatable. I have
$dt = dataTable({ ... })

I did figure out that I can use this hack
$dt.DataTable.settings[0]
but it's of course not working if I'm adding tables dynamically.

I need to get this, so I can get mData name for cell that I click on

$vc.on('click', 'td', function(){
  var cell_name = $dt
    .DataTable.settings[0]
    .aoColumns[$dt.fnGetPosition( this )[2]] // as I'm dynamically hiding columns, I get original position of column
    .mData

Is there any way to get settings for $dt or get mData for td clicked from existing API outside of datatable module?

Help me please Build DataTable with JSON

$
0
0
Hello, I need help please. How to build a table from my data in Json format using DataTables?

I write this code, but it did not work:
  var testdata = '[{"name":"Jhon","age":"23","sex":"M","phone":"210-828-5555"},{"name":"Barack","age":"30","sex":"M","phone":"210-828-4444"}]';
          
          $('#example').dataTable(
             {
                 "aaData": testdata,
                 "aoColumns": [{ "mDataProp": "name" },
                     { "mDataProp": "age" },
                     { "mDataProp": "sex" },
                     { "mDataProp": "phone" }
                  ]
             }
             );
Thanks!

Ajax Index Column Error

$
0
0
I want add an index numbering from ajax in my table.
i have follow this documentation http://datatables.net/examples/api/counter_column.html and it give an error "requested unknown parameter '1' from the data source for row 0".
then i try search some solution in forum and do some googling. i make some modification from documentation like these.
my php:
$this->load->library('datatables');
$this->datatables->from('lesson');
$this->datatables->select('lesson_name');
echo $this->datatables->generate();
my javascript:
var get_jurusan = function (table, url) {
    var oTable = $('#'+table).dataTable({
        "sPaginationType": "bs_normal",
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": url,
        "sServerMethod": "POST",
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [ -1 ] }
        ],
        "aoColumns": [
            {
                "sTitle": "Index",
                "fnDrawCallback": function ( oSettings ) {
                    if ( oSettings.bSorted || oSettings.bFiltered )
                    {
                        for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
                        {
                            $('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
                        }
                    }
                }
            },
            { "sTitle": "Lesson", "fnRender": function( oObj ) { return oObj.aData[0]} }
        ],
        "aLengthMenu": [
            [1, 10, 15, 20, -1],
            [1, 10, 15, 20, "Semua"]
        ],
        "iDisplayLength": 10,
    });
    wrapper(table);
};

function wrapper(table){
    $('#'+table+'_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Cari...");
    $('#'+table+'_wrapper .dataTables_length select').addClass("m-wrap small");
    $('#'+table+'_wrapper .dataTables_length select').select2();
}
Ajax response:
{"sEcho":0,"iTotalRecords":3,"iTotalDisplayRecords":3,"aaData":[["Mathematic"],["Basic Algorithm"],["Java"]],"sColumns":"lesson_name"}
but this make the lesson data show in both column like these http://oi40.tinypic.com/2lasb43.jpg.

this is link for debug result http://debug.datatables.net/ufazow

please help

Please help me with this grouping

$
0
0
The idea is to bring together in this order using .rowGrouping(); :

-First for date.
-Second by ageGroup.
-Third by sex.

Ideas please?


$('#example').dataTable(
{
"aaData": 
  [
     {
         "date":"2014/01/11",
         "name":"Caroline",
         "ageGroup":"E",
         "sex":"F",
         "phone":"210-828-5555"
     },
     {
         "date":"2014/01/11",
         "name":"Barack",
         "ageGroup":"E",
         "sex":"M",
         "phone":"210-828-4444"},
     {
         "date":"2014/01/12",
         "name":"Michelle",
         "ageGroup":"B",
         "sex":"F",
         "phone":"210-828-7777"},
     {
         "date":"2014/01/12",
         "name":"Jhon",
         "ageGroup":"C",
         "sex":"M",
         "phone":"210-828-9999"}
  ],
       "aoColumns": 
         [
            { "mDataProp": "date" },
            { "mDataProp": "name" },
           { "mDataProp": "ageGroup" },
           { "mDataProp": "sex" },
           { "mDataProp": "phone" }
         ]
}
);


The idea is to bring together in this order using .rowGrouping(); :

-First for the date.
-Second by age group
-Third by gender

Ideas please?

How to preserve/pass-through html th attributes to DataTable initialization?

$
0
0
This is a great progressive enhancement tool - congratulations!

I am saving the column sort settings (on the server) of each column (the class "sorting_asc" or "sorting_desc") from the <th/> element. When recreating the table, I re-apply the class attribute using a handlebar template. The problem I encounter is during DataTable initialization which sets other defaults. The initialization seems to override the th class attribute that is in the html DOM.

Here is the table header:
     <thead>
                <tr>
                    <th class="">Test Data</th>
                    <th class="text-center">Time</th>
                    <th class="text-center sorting_asc">Rank</th>
                    <th class="text-center">Coefficient</th>
                    <th>Forecast</th>
                </tr>
     </thead>

Here is the initialization code I use:
$forecastContainer.find('table.test-data').dataTable( {
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": true,
            "bInfo": false,
            "bAutoWidth": false,
            //"aaSorting": [[ 2, "asc" ]], //sorting configuration set in html template by specifying class attribute on each th
            "aoColumns": [
                /* Test Data */   null,
                /* Time Shift */  null,
                /* Forecast Date */ null,
                /* Confidence Interval */ null,
                /* Slider */ {
                    "bSearchable": false,
                    "bSortable":    false },
                /* Forecast */ {
                    "bSearchable": false,
                    "bSortable":    false }
            ]
        } );

How can I honor the existing th class attribute when initializing the table?

server side pblm

$
0
0
server side url is not working pls me

DataTables and Bootstrap 3 displays gap between header and scroll table and scrollbar

$
0
0
Why does Firefox have a horizontal scrollbar and Chrome doesn't? Chrome seems to display much better too. I would like to get rid of the horizontal scroll bar in Firefox. Here is the link:

http://jsfiddle.net/bhenry001/RXq7y/

Any ideas?
Thank you,
Bruce

Filtering not working as desired

$
0
0
Hi,

Am using datatables in my application. Paging and sorting is done using this. I have a search filter. How it should work is, if a user searches “Math Benchmark 1”, then the result display matching the complete name first, then “Math Benchmark”, then “Math”, and finally any words from the assessment. The default sort order is the one most matching the criteria first. How could I do this using datatable? I tried using $.fn.dataTableExt.afnFiltering, but am not getting proper result.

I appreciate your help in this

Apply $.fn.dataTableExt.afnFiltering to a DOM source datatable (on load from plugin)

$
0
0
Hi

I want to apply the range filter on a table that uses a DOM source, right now I achieve it by calling .fnDraw() on the table after $.fn.dataTableExt.afnFiltering.push call and it works fine, but I was wonder if there is a better more efficient way to do it.

For example in a sAjaxSource datatable I call the $.fn.dataTableExt.afnFiltering.push when table being initialized by the datatables constructor (before the draw event of the datatable is fired) so in the draw event the table being filtered thanks to the push I did to the $.fn.dataTableExt.afnFiltering.

So my question is: if I call my plugin in the following way: $(".my_table").datatables().myPLugin();, what would be the most efficient way to show the datatable filtered according to a range filter ($.fn.dataTableExt.afnFiltering.push)

b.t.w, I have values to push the the range filter because I'm reading those values from saved state (bStateSave --> oLoadedState) :)

Regards,

Daniel.

Search

$
0
0
Hey guys, i'm newbie

well, i have Field In table "NPM" as Primary Key
NPM -> 10000000,
10000001,
11000000
11000001,
12000000
12000001,
so my lectturer ask me how to add menu search by two charcter ('10,11,12') , any respon thanks so much

Alternating row colors don't work after page 1

$
0
0
Allan, good morning. I finally got everything working nicely and man it looks good. I ripped out the details and used a MODAL detail when clicking on the rows. Suffice it to say, when I page next or any page after "1", the alternating row colors don't stick. Meaning, they're just not there... page 1 is fine.

Thoughts?

row select not working when data loaded from a json file

$
0
0
http://jsfiddle.net/bigsipper/bVyCC/1/

I don't understand why row select - specifically the jquery '$('#example tbody tr').click( function() {...' - does not
work when I use
            oTable = $('#example').dataTable( {
                "bProcessing": true,
                "sAjaxSource": 'viewdata.json'
            });
	/* Add/remove class to a row when clicked on */
	oClick = $('#example tbody tr').click( function() {
			c = $(this).toggleClass('row_selected');
	} );



I'll put the contents of vewdata.json at the end of this post... this http://jsfiddle.net/bigsipper/bVyCC/1/ jsfiddle shows what I am trying to do, but it doesn't run.

I want to (simply) build a datatable (from a json file) and have multi row selection and highlighting. My example will display
the table and show the filter and sort buttons. But row selection just doesn't happen. If I use firebug to 'watch' the html, the
class of the 'tr' never toggles the 'row_selected' class. Its as if the on.click never fires. If I do the same thing,
but build the table in html it works fine. If I use json... ah, no bueno.

I must be lacking some information about the jquery selector. Does it CHANGE just when DataTables loads from 'sAjaxSource'????
Please send a clue....

-Bigsipper


[1178] ; cat viewdata.json 

{
  "aaData": [
    [
      "Trident",
      "Internet Explorer 4.0",
      "Win 95+",
      "4",
      "X"
    ],
    [
      "Trident",
      "Internet Explorer 5.0",
      "Win 95+",
      "5",
      "C"
    ],
    [
      "Trident",
      "Internet Explorer 5.5",
      "Win 95+",
      "5.5",
      "A"
    ],
    [
      "Trident",
      "Internet Explorer 6",
      "Win 98+",
      "6",
      "A"
    ]
  ]
}

Showing 1 to NaN of NaN entries (filtered from 2 total entries)

$
0
0
Hi, First post so be gentle.
I hope I have posted in the correct discussion group.

I have DataTables working using server side data. The basic part of the page information is displaying properly in that it's returning the correct total entries though I cannot get the show to work properly (see the NaN below).

Showing 1 to NaN of NaN entries (filtered from 2 total entries)

Apologies but I'm not the developer. I was brought here after trying to search for a solution. If there is any advice on where I need to start looking to fix I would appreciate it. It's a new plugin recently developed to show data for running clubs (athletes).

http://www.suttonrunners.org/recent-results

/*
 * Javascript functions for WPA my results page
 */

WPA.MyResults = {
	
	/**
	 * reads the profile photo url from the hidden input and populates as background image of the profile photo div
	 */
	loadProfilePhoto: function() {
		var url =  jQuery('#user-image').val();
		if(url) {
			jQuery('#wpaProfilePhoto').removeClass('wpa-profile-photo-default').css('background-image', 'url(' + url + ')');
		}
	},
	
	/**
	 * reloads all results
	 */
	reloadResults: function() {
		console.log('reloading results function');
		// redraw the table
		if(WPA.MyResults.currentTab == 'results') {
			WPA.MyResults.myResultsTable.fnDraw();
		}
		else if(WPA.MyResults.currentTab == 'pb') {
			// load personal bests
			WPA.MyResults.getPersonalBests();
		}
		
		// reload an event dialog if it is open
		WPA.reloadEventResults();
	},
	
	/**
	 * Loads personal bests
	 */
	getPersonalBests: function(disableLoading) {
		WPA.Ajax.getPersonalBests(function(result) {
			WPA.MyResults.pbTable.fnClearTable();
			WPA.MyResults.pbTable.fnAddData(result);
		}, {
			userId: WPA.userId,
			ageCategory: WPA.filterAge,
			eventSubTypeId: WPA.filterType,
			eventDate: WPA.filterPeriod,
			showAllCats: true
		}, disableLoading);
	},
	
	/** 
	 * Creates my results tables
	 */
	createMyResultsTables: function() {

		// My Results table
		WPA.MyResults.myResultsTable = jQuery('#my-results-table').dataTable(WPA.createTableConfig({
			"bServerSide": true,
			"sAjaxSource": WPA.Ajax.url,
			"sServerMethod": "POST",
			"sScrollX": "100%",
			"bScrollCollapse": true,
			"fnServerParams": function ( aoData ) {
			    aoData.push( 
			    	{name : 'action', value : 'wpa_get_results' },
			    	{name : 'security', value : WPA.Ajax.nonce }
			    );
			},
			"aaSorting": [[ 2, "desc" ]],
			"aoColumns": [{
				"mData": "time_format",
				"bVisible": false
			},{
				"mData": "id",
				"sWidth": "60px",
				"mRender": WPA.renderDeleteEditResultColumn,
				"bSortable": false
			},{
				"mData": "event_date"
			},{
				"mData": "event_name",
				"mRender" : WPA.renderEventLinkColumn
			},{
				"mData": "event_location",
				"mRender": WPA.renderEventLocationColumn
			},{
				"mData": "event_sub_type_id",
				"mRender" : WPA.renderEventTypeColumn,
				"bVisible": false
			},{
				"mData": "category",
				"mRender" : WPA.renderCategoryAndTerrainColumn
			},{
				"mData": "age_category",
				"mRender" : WPA.renderAgeCategoryColumn
			},{
				"mData": "time",
				"mRender": WPA.renderTimeColumn
			},{
				"mData": "time",
				"mRender": WPA.renderPaceMilesColumn,
				"bSortable": false
			},{
				"mData": "position",
				"sWidth": "20px",
				"mRender": WPA.renderPositionColumn,
				"sClass": "datatable-center"
			},{
				"mData": "garmin_id",
				"sWidth": "16px",
				"mRender": WPA.renderGarminColumn,
				"bSortable": false
			}]
		}));
		
		// Create the personal bests table
		WPA.MyResults.pbTable = jQuery('#my-personal-bests-table').dataTable(WPA.createTableConfig({
			"sDom": 'rt',
			"bPaginate": false,
			"sScrollX": "100%",
			"bScrollCollapse": true,
			"aaSorting": [[ 2, "asc" ]],
			"aoColumns": [{ 
				"mData": "time_format",
				"bVisible": false
			},{ 
				"mData": "user_id",
				"bVisible": false
			},{
				"mData": "event_cat_id",
				"bVisible": false
			},{
				"mData": "id",
				"sWidth": "60px",
				"mRender": WPA.renderDeleteEditResultColumn,
				"bSortable": false
			},{ 
				"mData": "category",
				"sClass": "datatable-bold-right-gray"
			},{ 
				"mData": "time",
				"sClass": "datatable-bold",
				"mRender": WPA.renderTimeColumn
			},{
				"mData": "time",
				"mRender": WPA.renderPaceMilesColumn,
				"bSortable": false
			},{ 
				"mData": "event_name",
				"mRender" : WPA.renderEventLinkColumn
			},{
				"mData": "event_location",
				"mRender": WPA.renderEventLocationColumn
			},{
				"mData": "event_sub_type_id",
				"mRender" : WPA.renderEventTypeColumn
			},{
				"mData": "age_category",
				"mRender" : WPA.renderAgeCategoryColumn
			},{ 
				"mData": "event_date"
			},{
				"mData": "club_rank",
				"sWidth": "20px",
				"bSortable": false,
				"mRender": WPA.renderClubRankColumn,
				"sClass": "datatable-center"
			},{
				"mData": "garmin_id",
				"sWidth": "16px",
				"mRender": WPA.renderGarminColumn,
				"bSortable": false
			}]
		}));

	},
	
	/**
	 * Deletes a result
	 */
	deleteResult: function(id) {
		WPA.deleteResult(id, function() {
			WPA.MyResults.reloadResults();
		});
	},
	
	/**
	 * performs filter search on the event name
	 */
	doEventNameFilter: function() {
		var defaultText = jQuery('#filterEventName').attr('default-text');
		var val = jQuery('#filterEventName').val();
		if(val != '' && defaultText != val) {
			WPA.filterEventName = val;
			WPA.MyResults.myResultsTable.fnFilter( val, 3 );
		}
		else {
			WPA.filterEventName = null;
			WPA.MyResults.myResultsTable.fnFilter( '', 3 );
		}
	}
};

How to set position after add row [ fnAddData() ] ?

$
0
0
After I clicked add I can't delete new row. How to set position ?
Please see script below.

Thank you.

<body>
<table width="550" border="2">
<tr align="center" bgcolor="#CCCCCC">
<td width="463">test</td>
</tr>
<tr>
<td height="86">
<table id="products" border="1" cellspacing="0" cellpadding="0" style="clear:both;">
<thead>
<tr>
<th>Column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody></tbody>
</table>
</td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="2">
<input type="button" name="btnAdd" id="btnAdd" value="add">
<input type="button" name="btnRemove" id="btnRemove" value=" remove ">
</td>
</tr>
</table>

<script type="text/javascript">
$(function() {
startTest();
});

function startTest() {

var arrTest = [
["1one", "1two", "1three", "1four"],
["6one", "6two", "6three", "6four"]
];

var oTable = $("#products").dataTable({
"aaData": arrTest,
"bProcessing": true,
"bDeferRender": true,
"bFilter": false,
"bJQueryUI": true,
"sPaginationType": "two_button",
"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"bRetrieve": false,
"bPaginate": true,
"bSort": false,
"aaSorting": [[0, "asc"]],
"iDisplayLength": 10
});

var iPosition;

$("#products tbody").click(function(event) {

$(oTable.fnSettings().aoData).each(function ()
{
$(this.nTr).removeClass('selected');
});

$(event.target.parentNode).addClass('selected');

});


$( "#products tbody tr" ).click(function() {

iPosition = oTable.fnGetPosition( this );

alert( "iPosition=" + iPosition );

if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
}
else
{
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}

});

$( "#btnRemove").click( function(){

if ( iPosition > -1 )
{
if ( confirm( "Delete '" + arrTest[iPosition] + "' ?" ) == true )
{
oTable.fnDeleteRow( iPosition );
}
}
else
{
alert( "Not Selected " + iPosition );
}
});

$( "#btnAdd").click( function(){

oTable.fnAddData([ ".1", ".2",".3",".4" ]);
var rows = $('#products tbody tr').length;
//alert( "rows" + rows );

});
}

</script>
</body>

Using datatable with makeeditable, wrong row selection when selecting newely added row

$
0
0
Dear Allan,

I am using jquery.dataTables.editable.js(Version:1.3) along with datatable(version 1.9.4). m new to datatables.
In add new row form, i have add button, and update button(modified default delete button to edit and update selected row in same add new row form).
i have mapped my form columns to datatable columns using "rel" attribute.

when i add new record and save => it is immediatly appended in datatable( and in backend database).
but when i select same row data using below,

oTable.$('tr').click( function () {
aData = oTable.fnGetData(this); // get datarow
});

It returns me wrong row data and not the one selected.
if i refresh my page and reload datatable, => it gives me correct index for editing.

mainly i fetch selected row data and fill it in add new row form for editing. i am not using inline editing.

Can you suggest me workaround for this? how and where can i refresh datatables.
also if we have more then 1000 records with around 40 columns each, it is NO GOOD to reload entire datatable after add/update, as it takes time to load from server.

Could you please help me with your suggestion on this?
Viewing all 1816 articles
Browse latest View live