Well i am using the datatable plugin.I read data from a txt where data is present which is suitable jSon format.But i need to make the data suitable for jSon read even when the data is seaparated by /n..what should i do??
↧
Json multiline parsing
↧
Editor and bServerSide, Concat and Join questions
First of all, I 've to say that Datatables + Editor has saved me countless hours of work which I spend reading books or watching interesting movies.
Now to the point:
I was tearing my hair out because I could not find a way to make Editor with bServerSide:true enabled.
And it was a very simple thing:
->process( $_POST )
for :
->process( $_REQUEST )
Since the request is sent by GET when changing order of the columns for example.
One thing I still didn't figured out dear Allan, is a way to make the sort in the server side, and I'm aware of the logic that it should be done either in the client or server side. But as I'm working with thousands of rows of big data, it would be a pleasure to do it on the server.
Another thing I yet didn't figured out, is if there is a way to CONCAT ( day,' ',hour) for example in the editor class (Currently I do it on the client) and also didn't figured out this little thing:
Editor::inst( $db, 'co_acc_logs' )
->pkey('lid')
->fields(
Field::inst( 'lid' ),
Field::inst( 'uid' ),
Field::inst( 'day' ),
Field::inst( 'hour' )
)
->join(
Join::inst( 'co_users', 'object' )
->join( 'uid', 'uid' )
->field(
Field::inst( 'email' )
)
)
Returns co_users.email as a Json object. But how I can do if I want to have this column in the natural fields (Instead of uid I would like to show their email for example )
Anyways, even if I don't know how to use it completely, so far in the latest 2 years has been a great tool! So thank you very much for creating it
Now to the point:
I was tearing my hair out because I could not find a way to make Editor with bServerSide:true enabled.
And it was a very simple thing:
->process( $_POST )
for :
->process( $_REQUEST )
Since the request is sent by GET when changing order of the columns for example.
One thing I still didn't figured out dear Allan, is a way to make the sort in the server side, and I'm aware of the logic that it should be done either in the client or server side. But as I'm working with thousands of rows of big data, it would be a pleasure to do it on the server.
Another thing I yet didn't figured out, is if there is a way to CONCAT ( day,' ',hour) for example in the editor class (Currently I do it on the client) and also didn't figured out this little thing:
Editor::inst( $db, 'co_acc_logs' )
->pkey('lid')
->fields(
Field::inst( 'lid' ),
Field::inst( 'uid' ),
Field::inst( 'day' ),
Field::inst( 'hour' )
)
->join(
Join::inst( 'co_users', 'object' )
->join( 'uid', 'uid' )
->field(
Field::inst( 'email' )
)
)
Returns co_users.email as a Json object. But how I can do if I want to have this column in the natural fields (Instead of uid I would like to show their email for example )
Anyways, even if I don't know how to use it completely, so far in the latest 2 years has been a great tool! So thank you very much for creating it
↧
↧
fnRowCallback is not recognized...
I am in new in DataTables impelementation, following is creating prblem for me: Please let me know what is the correct way/location to call a function.
function initDataTable() {
alert("basePath = "+"#{appBean.basePath}");
var oEmployeesTable = myVersion("#studentLib").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : "#{appBean.basePath}CATCmaStudentLibManagementServlet",
"aoColumns" : [
{"mData": "author" },
{ "mData": "title" },
{ "mData": "type"},
{ "mData": "brand" },
{ "mData": "version" },
{ "mData": "launch.language"},
{ "mData": "actions" },
]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(1)', nRow).html('<a href="car/=' + nRow[0] + '">' +
aData.Brand + '</a>');
return nRow;
}
});
}
at the line "fnEowCallback", i am getting an "unexpected string". Please correct me.
Thanks in advance.
function initDataTable() {
alert("basePath = "+"#{appBean.basePath}");
var oEmployeesTable = myVersion("#studentLib").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : "#{appBean.basePath}CATCmaStudentLibManagementServlet",
"aoColumns" : [
{"mData": "author" },
{ "mData": "title" },
{ "mData": "type"},
{ "mData": "brand" },
{ "mData": "version" },
{ "mData": "launch.language"},
{ "mData": "actions" },
]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(1)', nRow).html('<a href="car/=' + nRow[0] + '">' +
aData.Brand + '</a>');
return nRow;
}
});
}
at the line "fnEowCallback", i am getting an "unexpected string". Please correct me.
Thanks in advance.
↧
Colspan changes from colspan="3" to colspan="2" once JS kicks in...
HI, I have a a large table with 2600+ entries. I am using the wonderful header sorting features. I have it setup like so:
Once the page renders in IE, FF and Chrome it changes to (using Firebug... the view source still looks correct):
You can see that VEG is missing...
Any thoughts? Am I missing something?
Link to page with issue: http://www.fs.usda.gov/detailfull/plumas/home/?cid=stelprdb5424381&width=full
<thead> <tr> <th colspan="1" rowspan="2"> ROAD</th> <th colspan="1" rowspan="2"> MILES</th> <th colspan="3" rowspan="1"> BENEFIT</th> <th colspan="2" rowspan="1"> RISK</th> <th colspan="1" rowspan="2"> RECOMMENDATION</th> </tr> <tr> <th> VEG</th> <th> FIRE</th> <th> SOCIAL</th> <th> WATERSHED</th> <th> WILDLIFE</th> </tr> </thead>
Once the page renders in IE, FF and Chrome it changes to (using Firebug... the view source still looks correct):
<thead> <tr role="row"> <th class="ui-state-default" colspan="1" rowspan="2" role="columnheader" tabindex="0" aria-controls="taptable" style="width: 79px;" aria-sort="ascending" aria-label=" ROAD: activate to sort column descending"> <th class="ui-state-default" colspan="1" rowspan="2" role="columnheader" tabindex="0" aria-controls="taptable" style="width: 68px;" aria-label=" MILES: activate to sort column ascending"> <th colspan="2" rowspan="1"> BENEFIT</th> <th colspan="2" rowspan="1"> RISK</th> <th class="ui-state-default" colspan="1" rowspan="2" role="columnheader" tabindex="0" aria-controls="taptable" style="width: 163px;" aria-label=" RECOMMENDATION: activate to sort column ascending"> </tr> <tr role="row"> <th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="taptable" rowspan="1" colspan="1" style="width: 56px;" aria-label=" FIRE: activate to sort column ascending"> <th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="taptable" rowspan="1" colspan="1" style="width: 78px;" aria-label=" SOCIAL: activate to sort column ascending"> <th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="taptable" rowspan="1" colspan="1" style="width: 113px;" aria-label=" WATERSHED: activate to sort column ascending"> <th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="taptable" rowspan="1" colspan="1" style="width: 95px;" aria-label=" WILDLIFE: activate to sort column ascending"> </tr> </thead>
You can see that VEG is missing...
Any thoughts? Am I missing something?
Link to page with issue: http://www.fs.usda.gov/detailfull/plumas/home/?cid=stelprdb5424381&width=full
↧
datatable lazy loading "stuck"
When using lazy loading with the datatable there is a curious behavior. The grid will show ten rows at a time and is supposed to scroll more rows into view as the user scrolls down. However if ten rows fit exactly in the grid, even with more rows returned, the grid will not scroll down to those additional rows. However, if the returned rows wrap, as in a date-time column wrapping and forcing a taller row so ten rows do not all show at once on the grid then the grid will lazy load as expected, returning more and more rows as the user scrolls down. Is this a known issue? How can I fix this issue?
↧
↧
fix wandering pagination buttons
When using "full_numbers", DataTables will display the pagination control in this default format:
[First] [Previous] [1] [2] [3] [4] [5] [Next] [Last]
Repeatedly clicking Next through the 10th page causes an undesirable shift of the Next button to the right. To avoid the shift, you can include the following fnDrawCallback function to 0-pad buttons 1 thru 9. You can also use this callback function to easily change the default button labels to VCR-like buttons, etc.
[First] [Previous] [1] [2] [3] [4] [5] [Next] [Last]
Repeatedly clicking Next through the 10th page causes an undesirable shift of the Next button to the right. To avoid the shift, you can include the following fnDrawCallback function to 0-pad buttons 1 thru 9. You can also use this callback function to easily change the default button labels to VCR-like buttons, etc.
$(document).ready(function() {
$('#dynamic').html( '<table id="pipeline" class="pretty" cellpadding="2" cellspacing="1" border="0"></table>' );
var oTable = $('#pipeline').dataTable( {
"bPaginate": true, //Disable the vertical scroll bar in favor of pagination control.
"sPaginationType": "full_numbers", //Display the pagination control in this default format: [First] [Previous] [1] [2] [3] [4] [5] [Next] [Last]
"fnDrawCallback": function () { //After table is redrawn, customize the pagination control to consistently show 2-digit page numbers to reduce button wandering near the 10th page.
$('.paginate_button, .paginate_active').each(function() {
var pgNbr = $(this).text();
if (pgNbr.length==1 && pgNbr >= '1' && pgNbr <= '9' )
$(this).prepend('0');
else {
if (pgNbr == 'First') $(this).text('|<');
if (pgNbr == 'Previous') $(this).text(' <');
if (pgNbr == 'Next') $(this).text(' >');
if (pgNbr == 'Last') $(this).text('>|');
}
});
↧
Columns wrong alignment , table header and data improper alignment
Hi, here Jsfiddle
http://jsfiddle.net/AvdjR/1/
I tried
but still the column and data are not in proper alignment.
checked in both firefox and chrome
http://jsfiddle.net/AvdjR/1/
I tried
"sScrollX": "100%", "bScrollCollapse": true
but still the column and data are not in proper alignment.
checked in both firefox and chrome
↧
Uncaught TypeError: Cannot read property 'length' of undefined
Just wondering if anyone has any idea why this is happening.
http://home.mybluebox.net/mymovies/
Uncaught TypeError: Cannot read property 'length' of undefined jquery.DataTables.js:2107
happens when I type in anything in the genres column.
http://home.mybluebox.net/mymovies/
Uncaught TypeError: Cannot read property 'length' of undefined jquery.DataTables.js:2107
happens when I type in anything in the genres column.
↧
Yet Another Large Table Issue
Debugging ID: agecoz (http://debug.datatables.net/agecoz)
I have a table with 5k rows and 27 columns in total. The <thead> contains two rows as there's some to imitate the table here: http://www.datatables.net/release-datatables/examples/basic_init/complex_header.html
Running it in Chrome takes a few seconds, In Firefox I get the message whether I want to stop/start the script and IE just falls over. I've tried a number of options but nothing seems to work e.g.
I've tried using static data and data pulled from a database. I've run firebug on Firefox and it makes 5 calls in total to the data.asp page and some requests come back "401 unauthorized".
As the dataset is quite large, not sure what else I can do. I've checked other threads and tried to get from them what I can but going nowhere fast.
Any help would be greatly appreciated. Thanks!
I have a table with 5k rows and 27 columns in total. The <thead> contains two rows as there's some to imitate the table here: http://www.datatables.net/release-datatables/examples/basic_init/complex_header.html
Running it in Chrome takes a few seconds, In Firefox I get the message whether I want to stop/start the script and IE just falls over. I've tried a number of options but nothing seems to work e.g.
"bServerSide": true, "sAjaxSource": "data.asp", "sServerMethod": "POST", "bDeferRender": true
I've tried using static data and data pulled from a database. I've run firebug on Firefox and it makes 5 calls in total to the data.asp page and some requests come back "401 unauthorized".
As the dataset is quite large, not sure what else I can do. I've checked other threads and tried to get from them what I can but going nowhere fast.
Any help would be greatly appreciated. Thanks!
↧
↧
jQuery Migration deprecated functions.
I'm currently in the process of migrating to the jQuery 1.9.1. During this process I'm cleaning up all of the code in my repository and using jQuery Migrate to find and replace deprecated functions.
https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryfnattrselected-may-use-property-instead-of-attribute
Line 2777 jquery.dataTables.js version 1.9.4 is currently currently using .attr("selected", true). The latest jQuery 1.9+ should have these methods/functions changed to .prop().
It's a quick fix, but I'm currently running DataTables on a CDN.
https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryfnattrselected-may-use-property-instead-of-attribute
Line 2777 jquery.dataTables.js version 1.9.4 is currently currently using .attr("selected", true). The latest jQuery 1.9+ should have these methods/functions changed to .prop().
It's a quick fix, but I'm currently running DataTables on a CDN.
↧
Noob question on Ajax call
Hi,
first of all, thanks to allan for this great tool !
I've use dataTables for a long time, and for the first time I use it with Ajax call.
But this one does not work :(
I did this :
It seems to work ... partialy : my table goes on dataTable UI, but the XHR is not call (I listened to it with Developper tools)
I dont know what happen with this, I searched for 2 hours now ....
Thank you very much
David
first of all, thanks to allan for this great tool !
I've use dataTables for a long time, and for the first time I use it with Ajax call.
But this one does not work :(
I did this :
$('.data-table').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/ajax/articles",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""l>t<"F"fp>'
});
It seems to work ... partialy : my table goes on dataTable UI, but the XHR is not call (I listened to it with Developper tools)
I dont know what happen with this, I searched for 2 hours now ....
Thank you very much
David
↧
fnServerParams cannot pass unicode characters
I have a query string with unicode, e.g. "陳", and I use fnServerParams,
however, when I pass the input to server,
the request from browser shows the input is "陳"
I met this problem in firefox and IE too.
Finally, I use fnServerData instead and the problem can be solved.
I would like to know whether it is a bug or not.
however, when I pass the input to server,
the request from browser shows the input is "陳"
I met this problem in firefox and IE too.
Finally, I use fnServerData instead and the problem can be solved.
I would like to know whether it is a bug or not.
↧
How to change the output before it gets to the table displayed
I am using this method Link: http://www.datatables.net/release-datatables/examples/server_side/server_side.html
to grab my data from a mysql DB/table using php and bootstrap.
All works flawlessly.
My question is how do I change the value drawn from the DB before it is displayed in my html table page:
The Second column [1] is the column that is an enum field with a 'q' or an 'c', I want to change it to a word that corresponds to the letter. 'q' to "Quiz" and 'c' to "Camp".
I am pretty sure it is can be done in here:
Any assistance would be appreciated.
to grab my data from a mysql DB/table using php and bootstrap.
All works flawlessly.
My question is how do I change the value drawn from the DB before it is displayed in my html table page:
The Second column [1] is the column that is an enum field with a 'q' or an 'c', I want to change it to a word that corresponds to the letter. 'q' to "Quiz" and 'c' to "Camp".
I am pretty sure it is can be done in here:
/*
* Output
*/
$output = array(
"sEcho" => intval($_GET['sEcho']),
"iTotalRecords" => $iTotal,
"iTotalDisplayRecords" => $iFilteredTotal,
"aaData" => array()
);
while ( $aRow = mysql_fetch_array( $rResult ) )
{
$row = array();
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( $aColumns[$i] == "version" )
{
/* Special output formatting for 'version' column */
$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
}
else if ( $aColumns[$i] != ' ' )
{
/* General output */
$row[] = $aRow[ $aColumns[$i] ];
}
}
$output['aaData'][] = $row;
}
echo json_encode( $output );
Any assistance would be appreciated.
↧
↧
Loading two tables in a single jsp page
Hi ,
i have the following issue,
i just load 2 data tables in single jsp page , in that column filter is not working in first table,
my code sample:
First table code:
oTable = $('#mytable1').dataTable
( {
"bFilter":true,
"sDom": 'rt<"bottom"lip><"clear">',
"bProcessing": true,
"bDestroy": true,
"sAjaxSource":"/FinanceData/candidate.html",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "resultsql", "value":resultsql} );
aoData.push( { "name": "dept", "value":dept} );
},
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aoColumnDefs": [
{ "bSearchable": true, "bVisible": false, "aTargets": [6] }
],
"oLanguage":
{
"sSearch": "Search all columns:"
},
"bAutoWidth": false,
"aoColumns" : [
{ sWidth:"10%", "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%' , "sClass":"gridwrap"},
]
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
Second table code:
oTable = $('#mytable2').dataTable
( {
"bFilter":true,
"sDom": 'rt<"bottom"lip><"clear">',
"bProcessing": true,
"bDestroy": true,
"sAjaxSource":"/FinanceData/candiAjax.html",
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "ID", "value":ID} );
},
"oLanguage":
{
"sSearch": "Search all columns:"
},
"bAutoWidth": false,
"aoColumns" : [
{ sWidth:"10%", "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%' , "sClass":"gridwrap"},
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%' , "sClass":"gridwrap"},
{ sWidth: '10%', "sClass":"gridwrap" }
]
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
oTable.fnDraw();
oTable.fnDraw();
i have the following issue,
i just load 2 data tables in single jsp page , in that column filter is not working in first table,
my code sample:
First table code:
oTable = $('#mytable1').dataTable
( {
"bFilter":true,
"sDom": 'rt<"bottom"lip><"clear">',
"bProcessing": true,
"bDestroy": true,
"sAjaxSource":"/FinanceData/candidate.html",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "resultsql", "value":resultsql} );
aoData.push( { "name": "dept", "value":dept} );
},
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aoColumnDefs": [
{ "bSearchable": true, "bVisible": false, "aTargets": [6] }
],
"oLanguage":
{
"sSearch": "Search all columns:"
},
"bAutoWidth": false,
"aoColumns" : [
{ sWidth:"10%", "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%' , "sClass":"gridwrap"},
]
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
Second table code:
oTable = $('#mytable2').dataTable
( {
"bFilter":true,
"sDom": 'rt<"bottom"lip><"clear">',
"bProcessing": true,
"bDestroy": true,
"sAjaxSource":"/FinanceData/candiAjax.html",
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "ID", "value":ID} );
},
"oLanguage":
{
"sSearch": "Search all columns:"
},
"bAutoWidth": false,
"aoColumns" : [
{ sWidth:"10%", "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%' , "sClass":"gridwrap"},
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%' , "sClass":"gridwrap"},
{ sWidth: '10%', "sClass":"gridwrap" }
]
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
oTable.fnDraw();
oTable.fnDraw();
↧
Dynamically add Column???
I am using DataTables for a project for work, for my 'proof of concept' page I had a hard-coded html table, my coworkers now have it taking JSON data from the application and I need a way to add a column of checkboxes to the table (tried with javascript sort of like insert row doesn't play nicely if you use the drop down selector to increase the row count).
I know there is a way to 'select' rows and highlight them, that is already implemented, a column of checkboxes was also asked for.
is there someway I can do dataTable.insertColumn and put check boxes in it?
Thanks!
I know there is a way to 'select' rows and highlight them, that is already implemented, a column of checkboxes was also asked for.
is there someway I can do dataTable.insertColumn and put check boxes in it?
Thanks!
↧
Add a row to datatable
On 'addNewRow' button click, I would like to add a new row on the top of the table. Datatable does this using fnAddData.
I would like to add empty/default values and make only that row editable so that user can input data. Can jEditable be used to make only a particular row editable ?
I would like to add empty/default values and make only that row editable so that user can input data. Can jEditable be used to make only a particular row editable ?
↧
Datatables to nested HTML Tables
I was working on a problem where a tool is generating a html dynamically and to make it a bit interactive i thought of using dataTables magic. With a good start , i got stuck in a problem -
The html is having nested tables (tables within tables) and my question is - Is there any way to subsume datatables on my html. I tried but it is giving an error - nCell is undefined .
What can i do about it ?
Sample html -
The html is having nested tables (tables within tables) and my question is - Is there any way to subsume datatables on my html. I tried but it is giving an error - nCell is undefined .
What can i do about it ?
Sample html -
<script type="text/javascript">
$(document).ready(function() { $('#table_id,#id2').dataTable();} );
</script>
</head>
<body text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table id="table_id">
<thead>
<tr>
<th> AAA</th>
<th> gfff</th>
<th> fgfgf</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td> <table id ="id2">
<thead>
<tr>
<th>sfdsfsdf</th>
<th>ffdfs</th>
</tr>
</thead>
<tbody>
<tr>
<td>dzsfdfs</td>
<td>ddddddd</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
↧
↧
Dynamically create table headers and content
Hi guys,
Hoping someone can show me the error of my ways.
I have read quite a bit of the forum and am *mostly* happy with using DataTables.
I have posted a fiddle here:
http://live.datatables.net/idinat/33/edit
Basically, I want to send variables to DataTables for both column headings and table content.
This will change each time I select the table (I have several tables created within a JQuery UI modal, each table on a separate tab).
I'm ok using thistable.empty() and thistable.fnDestroy() when the modal closes so that I can re-init the tables (with the new vaiables) when the modal is opened again. I would like to pass this dynamic data to each table and then init the table just before the modal is opened.
I have probably done something quite silly (missing init option), but I just can seem to get it working.
Any help would be appreciated.
B.
Hoping someone can show me the error of my ways.
I have read quite a bit of the forum and am *mostly* happy with using DataTables.
I have posted a fiddle here:
http://live.datatables.net/idinat/33/edit
Basically, I want to send variables to DataTables for both column headings and table content.
This will change each time I select the table (I have several tables created within a JQuery UI modal, each table on a separate tab).
I'm ok using thistable.empty() and thistable.fnDestroy() when the modal closes so that I can re-init the tables (with the new vaiables) when the modal is opened again. I would like to pass this dynamic data to each table and then init the table just before the modal is opened.
I have probably done something quite silly (missing init option), but I just can seem to get it working.
Any help would be appreciated.
B.
↧
Prohibit the drag of the last column
Hello!
In datatables ban drag the first column can be written just such a line "oColReorder": {
"iFixedColumns": 1
}
and how to prevent drag the last column?
In datatables ban drag the first column can be written just such a line "oColReorder": {
"iFixedColumns": 1
}
and how to prevent drag the last column?
↧
Filter performance
Hi,
I developed a page with 3000 lines, and 19 columns displayed in a datatable.
Global and column filtering with columnFilter are enabled.
With deferRender, the page loads in 3-4 seconds and that's fine.
However the filter search is too slow : 3 seconds for a select filter, and it's not possible to write more than one letter per second in text filter.
I posted test case files on my server : http://www.atefpro.fr/test-case/
I just modified Datatable.js function _fnLoadState pour cookie management.
Thx for helping !
Alban
I developed a page with 3000 lines, and 19 columns displayed in a datatable.
Global and column filtering with columnFilter are enabled.
With deferRender, the page loads in 3-4 seconds and that's fine.
However the filter search is too slow : 3 seconds for a select filter, and it's not possible to write more than one letter per second in text filter.
I posted test case files on my server : http://www.atefpro.fr/test-case/
I just modified Datatable.js function _fnLoadState pour cookie management.
Thx for helping !
Alban
↧