Delete row using button dropdown inside table

October 10, 2012, 6:23 am

≫ Next: "Rectangle is outside bounds" when using TableTools

All

On the table we have a dynamic drop down menu that is generated for the last column on each table row

"<ul class=\"dropdown-menu\">" +
     				  	' <li><a class="btnDelete">Delete</a></li>' +
     				  "</ul>" +

In the js we have

$(".btnDelete").live('click',function() {
		var sData = oTable.fnGetData( this.parentNode.parentNode.parentNode.parentNode);
		
	});

When this fires the table does not return the row that the button was clicked from? Does anyone have an example of this?

↧

"Rectangle is outside bounds" when using TableTools

October 10, 2012, 6:29 am

≫ Next: Multiple Tables cause this[DataTable.ext.iApiIndex] to be undefined

≪ Previous: Delete row using button dropdown inside table

I tried to search for this error message in the forums, but there was no match. I have a simple setup of DataTables and the TableTools, both with latest releases. When I click any of the buttons for PDF, CSV, Excel etc., nothing happens. But starting Firebug, I see an error message sent to the console - "PPB_Graphics2D.PaintImageData: Rectangle is outside bounds." Apparently related to something in the JS-Flash communication? I have checked several times, and is pretty sure the right versions of each component and framework is correct here, see View Source on my page. TableTools and DataTables files are accessed as they are unzipped.

I am using Chrome, but the same thing happens with Firefox.

My page is here:

http://proto.tracetracker.com/JIRA/jira.cgi?issue=Story-128&from=2012-09-01&to=2012-10-03&bizLocationName=Stovner&bizLocationId=urn:epc:id:sgln:705474.911112.0

TableTools is used in the table in the Event Details tab.

I tested TableTools on the DataTables table in the first tab, and there it works! This indicates it may have something to do with my data? What type of limitations would exist if so?

Thanks for any help,

Steinar Kjærnsrød

↧

Multiple Tables cause this[DataTable.ext.iApiIndex] to be undefined

October 10, 2012, 5:46 am

≫ Next: Applying different CSS class to each column of each row

≪ Previous: "Rectangle is outside bounds" when using TableTools

Hi All,

I've got a very simmilar problem like:
http://datatables.net/forums/discussion/4384/how-do-i-make-api-calls-when-using-multiple-tables/p1

I'm trying to get the selected rows from my table, which works quite nice as long I have only the first table rendered.
The second table appears in a dialog in front of the other.

I found out that the function fnGetData() fails because this[DataTable.ext.iApiIndex] returns undefined.

this.fnGetData = function( mRow, iCol )
		{
			var oSettings = _fnSettingsFromNode( this[DataTable.ext.iApiIndex] );

Then I found the discussion above.
So, I added to my code:

    $.fn.dataTableExt.iApiIndex = 1;

Now I am wondering why it isn't changing anything.

Mycode:

function fnGetSelected(oTableLocal) {
    return $(oTableLocal.selector + ' tr.row_selected');
}

function fnGetSelectedRowIDs(oTableLocal) {
    oTableLocal.dataTable();

    var paramsArray = new Array();
    $.fn.dataTableExt.iApiIndex = 1;
    
    $.each(fnGetSelected(oTableLocal), function (index, item) {
        var rowValues = oTableLocal.fnGetData(item);
        paramsArray.push({ Id: rowValues[0], Uid: rowValues[1], RowVersion: rowValues[2] });
    });

    return { ids: idsArr, uids: uidsArr, rowversions: rowvArr, paramsArray: paramsArray };
}

I'm sorry, I can't make the page accessible to external users.

I've uploaded a debug dump at:
http://debug.datatables.net/esovor
Hope this helps.

Are there known issues from loading a dataTable into a JQuery dialog?

Is there any way to resolve this problem?

BTW:
Thank you, for your time and this really nice piece of software.

↧

Applying different CSS class to each column of each row

October 10, 2012, 9:12 am

≫ Next: jquery.floatThead - a new floating header plugin that works with datatables

≪ Previous: Multiple Tables cause this[DataTable.ext.iApiIndex] to be undefined

Hi,

I want to apply different CSS class to each column of each row after ajax call while creating of new paginated page.

Example:

For Ajax response as given below:

{
"sEcho": 1,
"iTotalRecords": "57",
"iTotalDisplayRecords": "57",
"aaData": [
[
"Gecko",
"Firefox 1.0",

want to apply light-yellow-class for this column

"Win 98+ / OSX.2+",
"1.7",
"A"
],
[
"Gecko",
"Firefox 1.5",

want to apply light-blue-class for this column

"Win 98+ / OSX.2+",
"1.8",
"A"
],
[
"Gecko",
"Firefox 2.0",

want to apply light-green-class for this column

"Win 98+ / OSX.2+",
"1.8",
"A"
],
[
"Gecko",
"Firefox 3.0",

want to apply light-gray-class for this column

"Win 2k+ / OSX.3+",
"1.9",
"A"
],
[
"Gecko",
"Camino 1.0",

want to apply light-yellow-class for this column

"OSX.2+",
"1.8",
"A"
],
[
"Gecko",
"Camino 1.5",

want to apply light-blue-class for this column

"OSX.3+",
"1.8",
"A"
],
[
"Gecko",
"Netscape 7.2",

want to apply light-yellow-class for this column

"Win 95+ / Mac OS 8.6-9.2",
"1.7",
"A"
],
[
"Gecko",
"Netscape Browser 8",

want to apply light-blue-class for this column

"Win 98SE+",
"1.7",
"A"
],
[
"Gecko",
"Netscape Navigator 9",

want to apply light-yellow-class for this column

"Win 98+ / OSX.2+",
"1.8",
"A"
]
]
}

Please help.

↧

jquery.floatThead - a new floating header plugin that works with datatables

October 9, 2012, 11:36 am

≫ Next: Datatable / Keytable / Jeditable : edit on double click

≪ Previous: Applying different CSS class to each column of each row

I recently released a new floating header plugin that works with datatables out of the box. The reason I wrote yet another plugin that floats the headers was because none of the existing plugins met my goals:

- minimally intrusive to your DOM, styles and events
- works on any table
- allows full page scrolling and x/y internal scrolling
- doesnt create invalid HTML
- good datatables support (because i use datatables)

Right now the plugin is in early beta, but if you want to see some demos you can do so here:
http://programmingdrunk.com/floatThead/

github: https://github.com/mkoryak/floatThead

Its still evolving, and feedback is welcome.

↧

Datatable / Keytable / Jeditable : edit on double click

October 10, 2012, 9:45 am

≫ Next: Sort column by rating (wordpress - wp table reloaded - gd star rating)

≪ Previous: jquery.floatThead - a new floating header plugin that works with datatables

Hi,

KeyTable with jeditable is just working great and it is useful to have cell selection on click. I would like to have cell edition on double click but I can't find a way to handle this. Do you have any idea / suggestion / example ? Perhaps by overloading keytable click event ?

Thanks

↧

Sort column by rating (wordpress - wp table reloaded - gd star rating)

October 10, 2012, 7:15 am

≫ Next: using ColReorder vs ColReorderWithResize

≪ Previous: Datatable / Keytable / Jeditable : edit on double click

Hi,

This is a question I asked on the Wordpress support but no solution could has been found.

My website uses Wordpress 3.4.2, and I manage tables thanks to WP Table Reloaded plugin.

I have integrated gd star rating shortcodes into rows table so users can vote.

For now, the column reads a shortcode for each row ([starrater tpl=10 post=xxxx]) where xxxx is the ID from the post.

So, when I sort the column by desc, it naturally sorts by name, and the higher id is the first.

Example, by desc :

[starrater tpl=10 post=1541]
[starrater tpl=10 post=1540]
[starrater tpl=10 post=1539]

But I need to sort by default the higher value from a vote, which has nothing to do with ID of course.

How can I make wp table reloaded interpret each shortcode rendering ?

Here is a link to the web-page : http://www.alloprod.com/labels-participatifs/

As you can see, I sorted the rows by myself and for now I plan to edit the table manually by changing the order of rows, as soon as I could.

↧

using ColReorder vs ColReorderWithResize

October 10, 2012, 8:37 am

≫ Next: sScrollY ignored completely

≪ Previous: Sort column by rating (wordpress - wp table reloaded - gd star rating)

Two questions:
1) Do I need both libraries? I can not seem to find instructions on which libs to use.
2) I have tried each one and in both cases I am only able to move columns to after the last column and not back. If I use the resize I get the handle but the function does not work.

The table is initialized in the fnDrawCallback": function( oSettings ) that I have included in the .dataTable init. If it makes any difference, the table is in a tab.

Here are the init props.

$('#searchResultsTable').dataTable({
"iDisplayLength": 25,
"aLengthMenu": [[5, 25, 50, 100, -1], [5, 25, 50, 100, "All"]] ,
"bJQueryUI": true,
"bAutoWidth": true,
"aoColumnDefs" : [ {"bSearchable" : false, "bSortable" : false, "aTargets" : [ 0 , 7 , 8] } ],
"sPaginationType": "full_numbers",
"bDestroy": true,
"bProcessing": true,
"sDom": 'R<"H"lfr>t<"F"ip>',
"fnDrawCallback": function( oSettings ) { other stuff here }

I have no ability to provide a link to the page, but just looking for some ideas as to what I should look at.

Thanks.

↧

sScrollY ignored completely

March 26, 2012, 10:37 am

≫ Next: cursor changes though sorting is disabled

≪ Previous: using ColReorder vs ColReorderWithResize

Hi,

I am trying to make the table body scrollable using sScrollY, but this parameter makes no difference whatsoever to the appearance of the table.

Here is the table initialization code:

oTable = $('#tablewidget').dataTable(
{
"bAutoWidth": false,

"aoColumns":
[
{ "sWidth" : "5%", "bSortable": "false" },
{ "sWidth" : "10%", "iDataSort" : 8 },
{ "sWidth" : "17%" },
{ "sWidth" : "15%" },
{ "sWidth" : "15%", "sType": "listTypeCount" },
{ "sWidth" : "15%" },
{ "sWidth" : "12%" },
{ "sWidth" : "22%" },
{"bVisible" : false}

],
"sScrollY": "200px", // ********* Scrolling parameter
"aaSorting": [[1,'desc']],
"sPaginationType": "full_numbers",
"sDom": '<"top"p>f',
"oLanguage": {
"sSearch":'<span style="float: left; padding-left:20px;margin-top:10px;">Search for: </span>',
"oPaginate": {
"sNext" : "Next",
"sPrevious" : "Prev."
}
}
,"iDisplayLength": 10 //control how many records per page to display. Defaulting to 10

}
);

Any help appreciated!

Thanks

↧

cursor changes though sorting is disabled

October 10, 2012, 1:37 am

≫ Next: Inline editing like (or with) JEditable?

≪ Previous: sScrollY ignored completely

Hi,

I have used datatables in my application. I donot want the sorting functionality to be enabled in these. I have created a table with class 'display'.
In jquery, I have used the below lines of code:
"bSort": false,
"aaSorting": [],

Also, in the datatable class i.e., demo_table.css I have altered the style as below:
table.display thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor : pointer,
/*cursor: hand;/ /*commented the below line and added this line - for not changing the cursor*/
}
But still, when I hover the header of datatable, the cursor changes to hand. Can anyone please help me in this.

thanks,
Sruthi

↧

Inline editing like (or with) JEditable?

October 10, 2012, 10:53 am

≫ Next: fnOpen() method question

≪ Previous: cursor changes though sorting is disabled

How can I allow inline spreadsheet-like editing with Editor? Does Editor integrate, for example, with JEditable (http://datatables.net/examples/api/editable.html)

↧

fnOpen() method question

October 10, 2012, 12:06 pm

≫ Next: Custom Renderer possible for Table Headers & sPdfMessage ?

≪ Previous: Inline editing like (or with) JEditable?

I am using fnOpen() method to display some details about the row. Now my details has grown so I am trying to put those details in separate page ("details.jsp") and have open with fnOpen(). Is that possible?

According to API second parameter can be {string|node|jQuery}.

Any help is appreciated.

Thanks

↧

Custom Renderer possible for Table Headers & sPdfMessage ?

October 10, 2012, 12:13 pm

≫ Next: Make pagination and search shareable.

≪ Previous: fnOpen() method question

Hello,
Thanks a lot for the amazing plugin. I have a question regarding the Custom Renderer. Right now , I am able to use the "fnCellRender" option to render the customized td details. Is there any possibility to have a similar functionality for Table headers as well i.e to be able to override a function when a Table Header is being rendered ? and similarly for the sPdfMessage ? My Requirement for the sPdfMessage overriding is that I want to include the text that are being inputted and filtered in Datatables as the Title to the generated report after filtering.

Thanks a lot!

↧

Make pagination and search shareable.

October 10, 2012, 12:51 pm

≫ Next: Using down arrow to navigate the table and scroll up one line when last row is reached

≪ Previous: Custom Renderer possible for Table Headers & sPdfMessage ?

Hello,

I am using Datatables with Bootstrap. Simple Dom source. Is it possible to make Datatables update current url based on filter/page? E.e. http://myapp/#q=some+query&page=2?

Thanks.

↧

Using down arrow to navigate the table and scroll up one line when last row is reached

October 10, 2012, 1:57 pm

≫ Next: bJQueryUI: true with row_details api - borders displayed on cells when first row expanded

≪ Previous: Make pagination and search shareable.

Hi - I am trying to have a down arrow to navigate the jquery datatable. And when we reach the last line, then next row gets shown and the table scrolls up one line up.

For eg, let the table be this:

Row 1
Row 2
Row 3
Row 4
Row 5

When I reach the row 5 using the down arrow, and press down once again, the new data table will be:

Row 2
Row 3
Row 4
Row 5
Row 6

Hope you can give some info on how to achieve this.

Thx

↧

bJQueryUI: true with row_details api - borders displayed on cells when first row expanded

October 9, 2012, 7:10 am

≫ Next: DataTables warning: JSON data from server could not be parsed.

≪ Previous: Using down arrow to navigate the table and scroll up one line when last row is reached

Hi,

Found an interesting issue when using bJQueryUI: true and the row_details api functionality. Have mocked up an example, combinging the row_details example with the themeroller example, for reference.

Example: http://jsbin.com/ifiqol/1/

The issue I've found is when expanding the FIRST row, it inserts left/right borders on the cells in the row - it doesn't do it for the rest of the rows. In addition, collapse that first row down...the borders are filled in on all cells in all the rows.

Any ideas on what might be causing it? And maybe a workaround/fix for it? Ideally I want the first row to behave exactly how the other rows behave -> no border.

↧

DataTables warning: JSON data from server could not be parsed.

February 14, 2011, 11:06 am

≫ Next: little issue with filtering

≪ Previous: bJQueryUI: true with row_details api - borders displayed on cells when first row expanded

For some reason, this just started happening. I am getting this error when trying to load in my JSON data with AJAX:
"DataTables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error."

Firebug is giving this error:
Invalid label
{"aaData:" [

Here is the HTML, JS and JSON. I have no idea what happened or why...does anyone here?

Table HTML:

 
   <table id="test_table">
        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
                <th>Four</th>
                <th>Five</th>
                <th>Six</th>
                <th>Seven</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

Javascript:

    $('#test_table').dataTable({
        "sAjaxSource" : 'dt_ajax.txt'
    });

JSON Data:

{"aaData": [
      [
          "<img src=\"images/details_open.png\">",
          "3S",
          "38",
          "09",
          "300000",
          "500000",
          "Test data"
      ],
      [
          "<img src=\"images/details_open.png\">",
          "5I",
          "34",
          "12",
          "500000",
          "1000000",
          "aaaaa"
      ],
      [
          "<img src=\"images/details_open.png\">",
          "Jumbo",
          "9",
          "8",
          "888888",
          "8888888",
          "testtt"
      ]
]}

Thanks in advance! P.S. The data works fine when input directly. Only "sAjaxSource" is getting this error.

↧

little issue with filtering

March 16, 2009, 2:39 pm

≫ Next: Tabletools - Download XML/JSON file

≪ Previous: DataTables warning: JSON data from server could not be parsed.

Hi,

I found a little issue in the filtering.
If you move the cursor after begining to type, filtering don't work
Example : http://datatables.net/examples/example_zero_config.html
type "win" in the search field. It work well.
click with the mouse juste before the "w" in the search field
type "gecko " (then now in the search field you have "gecko win")
Filtering don't work, found 0 result (instead of 17)
type another space, and the push the BACKSPACE key, then filtering work good

It's not really important, i do not need you fix them, just report it ;-)

Thank you for your great work ! (and for the greatest 1.5 :D )

↧

Tabletools - Download XML/JSON file

October 10, 2012, 9:59 pm

≫ Next: Data entry screen

≪ Previous: little issue with filtering

Hi,

Does Table Tools allow a user to download the data in XML/JSON, I know they already have csv/excel/pdf but was wondering if there could be a way to allow it to download xml or json. can anyone point me as to what and where needs to be changed/added for such functionality.

I am using a mysql for the backend and connecting datatables directly. It would be great to have xml or json for an application I am making.

thanks

↧