Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 82709 articles
Browse latest View live

deferred render question

$
0
0
Hi, I was wondering what kind of data source you need to use with deferred rendering. I have turned on the option expecting that if I display 100 rows at a time the performance should be similar to a table with ~300 rows. This is not playing out though.

Edit: not 300 in this case since only ~6 rows are showing with a 200px window. My understanding is only the displayed rows, and an equal number above and below are rendered by default.

My question would be then, do I need to use the Ajax data source with server side processing ( like the manual's example) or can I just pass it a javascript array like I am doing?

Here is the example code I am using for table creation. Datatables Live is currently giving me a 503 error, and I cannot link to the webpage directly.

            var numCols = 15;
            var numRows = 8000;
            var aoColumns = [];
            var rows = [];

            for (var i= 0; i < numCols; i++)
            {
                    aoColumns[i] = { "sTitle" : "column #"+i }
            }

            for (var i = 0; i < numRows; i++)
            {
            	var new_row = [];
                for (var j = 0; j < numCols; j++)
                {
                        new_row.push(j);
                }
                rows.push(new_row);
            }

            this.$('table').dataTable({
                "aoColumns" : aoColumns,
                "aaData" : rows,
                "bPaginate" : false,
                "bFilter" : true,
                "bSort" : true,
                "sScrollY" : "200px",
                "bDeferRender": true
            });

Trying to load once via ajax from server and then sort and filter on client side.

$
0
0
I am trying to get my data from the server via ajax one time and then use client side sorting, filtering, etc.

I thought this would accomplish that, but it only pulls data if I have bServerSide set to true:

    $(document).ready(function () {
        
        var oTable = $('#dataTableAccountList').dataTable({
            "bServerSide": false,
            "bDeferRender": true,
            "sAjaxSource": '/AccountList/GetData'
        });

        $('.dataTables_length select').uniform();
        $('.dataTables_paginate > ul').addClass('pagination');
    });


If I set it to true I get the data, if I set it to false I get "No data available in table"

Guessing that I am missing something simple. The page is not yet published, but if you need me to get something out there then I will put it together.

Thanks!

Ajax Loader Display & Grey out Datatable

$
0
0
Hi All,

I want to display loader inside datatable and grey out whole datatable(so that use can not make any changes inside datatable) on any ajax call.

What is the best way to achieve this?

Waiting for your suggestions.

Thanks in advance.

column Total for all pages

$
0
0
I am tring to use DataTables in my test environment for my companies website. I have implemented it successfully by following the examples of server side processing. But I am having difficulty is showing column total of all pages. I tried to use fnFooterCallBack function as described but it only shows the total of current page rows for that column not all rows on all pages for that column. e.g if I have 10 record in total with column total of 600.00 and if I am displaying 5 in one page then I get total of 375.00 and on the second page it shows total of 225.00.

I tried to find solution from all replies in this forum for this issue but couldn't able to get any solution. According to example of fnFooterCallBack function "* Calculate the total market share for all browsers in this table (ie inc. outside the pagination)" but it doesn't work in this way. It only calculates the current page.

How can I display 600.00 regardless of displayed records?

Here is my code from the example

<script type="text/javascript">
	$(document).ready(function() { 
	    /*
	     * Initialse DataTables, with no sorting on the 'details' column
	     */
	    var oTable1 = $('#customerdata').dataTable( {
	      	"sPaginationType": "full_numbers",
        	"oLanguage": {
		"sInfoFiltered": ""
		},			
		"aaSorting": [[ 3, "desc" ]],
        	"bProcessing": true,
        	"bServerSide": true,
		"sAjaxSource": "../wp-content/themes/mytheme/customertable.php?cust_id=<?php echo $customer_id; ?>",
		 "fnFooterCallback": function ( nRow, aoData, iStart, iEnd, aiDisplay ) {
       		                /*
		                 * Calculate the total market share for all browsers in this table (ie inc. outside
		                 * the pagination)
		                 */
		              var iBalance= 0;		              
		              for ( var i=0 ; i<aoData.length ; i++ )
		                {
		                   iBalance += aoData[i][4]*1;
		                }		                
		                /* Modify the footer row to match what we want */
		                var nCells = nRow.getElementsByTagName('th');		             
		         	nCells[4].innerHTML = parseFloat(iBalance).toFixed(2);       
		},				
	    });     
	} );
</script>

Any help will be appreciated. thanks

Requested unknown parameter '0' from the data source for row 0

$
0
0
The minimal code for the ajax loading of rows is as below.

$table
    .dataTable({
      "bServerSide": true,
      "sAjaxSource": "/deals/deal_data",
       fnRowCallback: function(tr, data){
         var $html = $(data.html_row);
         var $tr = $(tr);
         $tr.html($html.html());
      }
    });

Data returned from server in the following format.
{
aaData: [
   {
     html_row: '<tr><td attr1=val1 attr2=val2>hello</td><td newattr=valnew newattr1=val1>cells</td></tr>'
   }
 ]
}

Now I understand why data-table is giving this alert error. As you see I am custom populating the cells.
How can I stop datatable from raising the alert 'Requested unknown parameter '0' from the data source for row 0'.?

Not able to do ajax.url().load() on multiple Tables

$
0
0
Hi,
i have two of the awesome Datatables:
                var table = $('#UserTable').DataTable( {
                    ajax: "/ajax/admin/getusertable/datatable",
                	"aoColumns": [
                              	{ "mData": "username"},
                              	{ "mData": "email"},
                              	{ "mData": "state"},
                              	{ "mData": "note"},
                              	{ "mData": "created_at"},
                              	{ "mData": "updated_at"},
                              	]
                } );

            	var historytable = $('#UserHistoryTable').DataTable( {
                	"aoColumns": [
                              	{ "mData": "key"},
                              	{ "mData": "old_value"},
                              	{ "mData": "new_value"},
                              	{ "mData": "user_id"},
                              	{ "mData": "updated_at"}
                              	]
                } );



This works fine. When i do some Updates, i want to reload the UserTable.
I do
table.ajax.reload();
this also works fine. But then i want to load the "historytable" with a new Datasource
historytable.ajax.url( "/ajax/getusrhstry/" + id ).load();
This results in error throwing
"DataTables warning: table id=UserTable - Requested unknown parameter 'username' for row 0."
and destroy my UserTable.

Seems like, it is trying to load the Data into the "UserTable" instead into the "UserHistoryTable" but i have no clue what is wrong with my code.

Datatable Server Side with firebird

$
0
0
Hi,

its possible to use firebird with server side?

thank you

How to put the link to export to excel in other button?

$
0
0
Hi Dear,

I'm using the aButtons TableTools to export to excel, but the header is too hight. So, I would like to put the link to export in another button, in other place my html.

Could anybody help me?

Regards,
Thiago Barros

TableTools not exporting all rows with bServerSide false when via ajax

$
0
0
I am using the following code to create a datatable. I am pulling data via ajax, but only at the start, so all filtering and sorting etc, is on the client side. If I populate the rows in the table directly I can get all of my filtered results, but if I use the ajax call (which allows me to take advantage of the "Processing..." message) it exports only the current page of data.

        var oTable = $('#dataTableAccountList').dataTable({
            "sDom": "<'row'<'col-lg-6'l><'col-lg-6'Tf>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
            "bServerSide": false,
            "bDeferRender": true,
            "sAjaxSource": '@Url.Action("AccountLoadThroughAjaxCall", "AccountList")',
            "bProcessing": true,
            "oTableTools": {
                "sSwfPath": "/Scripts/TableTools-2.2.0/swf/copy_csv_xls_pdf.swf",
                "aButtons": [
                {
                    "sExtends": "copy",
                    "oSelectorOpts": { filter: 'applied', order: 'current' }
                },
                {
                    "sExtends": "xls",
                    "oSelectorOpts": { filter: 'applied', order: 'current' },
                    "sFileName": "AccountList_yyyy-MM-dd_hh.mm.ss.xls"
                },
                {
                    "sExtends": "pdf",
                    "oSelectorOpts": { filter: 'applied', order: 'current' },
                    "sFileName": "AccountList_yyyy-MM-dd_hh.mm.ss.pdf",
                    "sPdfOrientation": "landscape",
                    "sPdfMessage": "Account List" + ($('div.dataTables_filter input').length > 0 ? " Filter: " + $('div.dataTables_filter input').val() : "")
                },
                {
                    "sExtends": "print",
                    "oSelectorOpts": { filter: 'applied', order: 'current' },
                }
                ]
            }
        });

Again I am sure I am missing something simple, but can't see what it is.

Thanks in advance!

bDeferRender incompatible with FixedHeader?

$
0
0
just editing a basic dataTable, but when i added FixedHeader implementation, the sorting of the ascending/descending arrows got out of sync. i saw it discussed in another topic, but it was closed and not answered. Through trial and error I determined that bDeferRender: true caused the out of sync arrows/sorting that I was experiencing.

fnDrawCallBack fnDraw undesired results while posting

$
0
0
Hey guys,
I am using datatables and I am running a callback function after the table loads via the "fnDrawCallBack":, the function I'm running is loadModalLinks, please see here http://pastebin.com/A4DZ08wt or below.
1) I would like that every time an "X" is clicked for that row a modal window is presented prompting the user to confirm deletion of that object. Once deleted I would run the fnDraw (redraw method) on the datatable object to refresh the rows.

2) It does work for the first deletion, unfortunately every subsequent deletion it posts to the backend the previous deleted ones in an accumulative fashion, I guess there's somewhat of a recursive nature to this, where fnDrawCallBack calls fnDraw and so on

Please help

function loadModalLinks() {
	// Get a reference to the datatable
	var oTable = $(this).dataTable();

	$('a[href^="/patients"][href*="delete/"]').on('click', function(e){
		// Get the URL from the link
		var url = $(this).attr('href')
		
		// Prevent default action
		e.preventDefault(); 

		// Prepare csrftoken
		var csrftoken = getCookie('csrftoken');
		$.ajaxSetup({
			crossDomain: false, // obviates need for sameOrigin test
			beforeSend: function(xhr, settings) {
				if (!csrfSafeMethod(settings.type)) {
				    xhr.setRequestHeader("X-CSRFToken", csrftoken);
				}
			}
		});

		var onDelete = function (e) {
			e.preventDefault();
			$.post(url, function(data) {
				console.log(url);
				if (data.result == "ok"){
					//alert("data deleted successfully");
					oTable.fnDraw(false);
				} else {
					// handle error processed by server here
					alert("smth goes wrong");
				}
			}).fail(function() {
				// handle unexpected error here
				alert("error");
			}).always(function () {
				$('#PatientConfirmDeleteModal').modal('hide');
			});
		}
		
		$('#PatientConfirmDeleteModal form').submit(onDelete);

		// Show the modal
		$('#PatientConfirmDeleteModal').modal('show');
	});
}

Plug-in fails for large amount of data (84000 ) input fields

$
0
0
Hi,

My HTML layout consists of 60 header <th> cols , 1400 <td> rows.
For this large data, plug-in fails. No error is thrown. IE browser says it encountered a problem and gets closed.

I read about the datatables usage: 4 different ways of passing data to the datatable plug-in (Refer: http://datatables.net/usage/)

I believe mine is DOM approach and it failed because of huge data.

Do you think i can try for other 3 approaches:
JavaScript array
Ajax source
Server-side processing

Considering my complicated html structure, kindly suggest me a best approach. Also provide me a link to implement the same.

Thanks,
Veena

How to get from the server only what is being displayed.

$
0
0
So what I'm wondering, is if there is a way to set up data tables so that it still shows the proper pagination (for example if there are 57 records and 10 per page, it'd still show the page 1, page 2 ect buttons) but only make a request for the data that would be displayed. IE only make a request from the datasource for entries 1-10. The end behavior that I'm after is to make it so that any time someone does anything with the data, be it sorting the columns, making a query, switching pages, anything that it makes a call to the server to get the information with the proper information. A big part of the reason is what you've described on the server-side processing example on the front page, but I'd rather that the client tells the server only what it wants so that the server code can be reduced.

My thought was to basically query the datatables for things such as iDisplayLength and iDisplayStart to get all the information that I need to just make an ajax request myself and than redraw the table with new information, but I'm not entirely sure what properties I'd even need to be able to do that so I'm hoping there is a more clean way of doing something like this. Any help would be greatly appreciated.

Responsive desing

$
0
0
anyone know of any plugin to implement responsive design datatable???

Server side paging, preformatted rows

$
0
0
Hello,

I plan to feed DataTables with preformatted rows (<tr><td>...</td></tr>)
Is it possible to do this? Can anyone point me to the relevant docs?

TIA

Can I use angularjs and breezejs for datatables?

$
0
0
Can I use angularjs and breezejs for datatables? Does anyone have a sample?

how to avoid the column of checkbox binding data from js array

$
0
0
                                                                      <thead>
										<tr>
											<th class="center">
												<label>
													<input type="checkbox" />
													<span class="lbl"></span>
												</label>
											</th>
											<th>Domain</th>
											<th>Price</th>
											<th class="hidden-480">Clicks</th>

											<th class="hidden-phone">
												<i class="icon-time bigger-110 hidden-phone"></i>
												Update
											</th>
											<th class="hidden-480">Status</th>

											<th>operation</th>
										</tr>
									</thead>

$('#sample-table-2').dataTable( {
				"aaData":[
					["aaa","bbbb","cccccc","Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],
					["aaa","bbbb","cccccc","Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],					
					["aaa","bbbb","cccccc","Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],					
					["aaa","bbbb","cccccc","Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],					
					["aaa","bbbb","cccccc","Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"]					
				  ],
				
				  "aoColumnDefs":[{
						"aTargets": [ 0 ], 
						"bSortable": false, 
						"mdata":null,
						"mRender": function ( url, type, full )  {
						  return  '<label><input type="checkbox" /><span class="lbl"></span></label>';
						},
						"sClass": 'center',
				  }]
				  
				  } ); 

please tell me how to avoid "aaa" binding to targets[0],I want to skip it so that I can put six values to seven columns

I think the checkbox don't have bind any values because it is insignificance

Create a master-detail table

$
0
0
I was looking the official manual of Datatables and I found that: http://www.datatables.net/release-datatables/examples/server_side/row_details.html

I'm trying to make a master-detail table like this but I want to show the detail in other table, not in the master table. I think that I can get the content of the row I click and send it using AJAX to do the query and show the content in the detail table. I have the following code for load the datatables and can click in a row.
$(document).ready( function () {
    $('#PRESUP').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "sRowSelect": "single"
        }
    } );
    $('#PRESUP_D').dataTable( {
        "sDom": 'T<"clear">lfrtip',
         "oTableTools": {
            "sRowSelect": "single"
         }
    } );
} );
PRESUP is the master table and PRESUP_D is the detail table. I need to add to this function other function for get the value of the clicked row and for send it to an AJAX file.

Uncaught TypeError : Cannot read property 'mData' of undefined

$
0
0
This is mvc 4 application with razor view. I made sure only single instance of jquery is loaded. BTW is jquery 1.9.0 compatible with dataTables 1.1 beta? This is my first time using dataTable.
       <table id="studenttable">
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.data1</td>
                    <td>@item.data2</td>
                    <td>@item.data3</td>
                    <td>@item.data4</td>
                </tr>
            }
        </table>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0-beta.2/css/jquery.dataTables.css">
<script type="text/javascript" src="/Scripts/jquery-1.9.0.js"></script>
<script type="text/javascript" src="/Scripts/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function () {
                $("#studenttable").dataTable();
            }
        )
 </script>

No data displayed

$
0
0
I've used DataTables quite a bit in the past, but this one has me stumped. I think it's my data format. I'm pulling in data from two different sites, running calculations and re-writing into an object. The table is initializing properly and with the headers as defined by aoColumns, sTitle, but there is no data showing up in the table, i just get one blank line.
Here's a link to a fiddle (first one I've ever done and it's doing absolutely nothing):
http://jsfiddle.net/rusieb/v9Dge/
Here's my data as it's formatted currently:
{
"aaData": [
{
"ID": "1",
"Title": "Test title",
"Priority": "0",
"Criticality": "0",
"Technical": "0",
"Programmatic": "0",
"Total": "0",
"Quantity": "0"
},
{
"ID": "2",
"Title": "Test title",
"Priority": "0",
"Criticality": "0",
"Technical": "0",
"Programmatic": "0",
"Total": "0",
"Quantity": "0"
},
{
"ID": "3",
"Title": "Test image attachment",
"Priority": "0",
"Criticality": "0",
"Technical": "0",
"Programmatic": "0",
"Total": "0",
"Quantity": "0"
},
{
"ID": "4",
"Title": "Test ppt attachment",
"Priority": "6",
"Criticality": "10",
"Technical": "45",
"Programmatic": "0",
"Total": "55",
"Quantity": "1"
},
{
"ID": "5",
"Title": "test large ppt",
"Priority": "9",
"Criticality": "15",
"Technical": "35",
"Programmatic": "0",
"Total": "50",
"Quantity": "1"
},
{
"ID": "6",
"Title": "test pdf",
"Priority": "1",
"Criticality": "15",
"Technical": "45",
"Programmatic": "0",
"Total": "60",
"Quantity": "1"
},
{
"ID": "7",
"Title": "TEST OF SUBMISSION FROM BASE",
"Priority": "0",
"Criticality": "0",
"Technical": "0",
"Programmatic": "0",
"Total": "0",
"Quantity": "0"
}
]
}

And my table initialization code:
var oTable = $('#SummaryTable').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [
"csv",
"xls",
{
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "Check check "
}
]
}
],
"sSwfPath": "../Scripts/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
},
"aaData" : SubmissionsData,
"aoColumns": [
{"sTitle": "ID", "mData": "ID"},
{"sTitle": "Title", "mData": "Title" },
{"sTitle": "Priority", "mData": "Priority" },
{"sTitle": "Criticality Score", "mData": "Criticality" },
{"sTitle": "Technical Risk", "mData": "Technical" },
{"sTitle": "Programmatic Risk", "mData": "Programmatic" },
{"sTitle": "Total Score", "mData": "Total" },
{"sTitle": "# Evals", "mData": "Quantity"}
],
"aLengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
"iDisplayLength" : 10

}); //close otable datatable



Sorry i can't post a link to my live page, it's on a secure server. Thanks in advance for any help!
Viewing all 82709 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>