In my project, the number of columns in main table depends on the user settings and I get it from AJAX to dataTable directly. Several of these columns show different amounts (eg pre-price, final-price, etc.). Now, I have a task to calculate these pices to total sums in the footer.
I already know in which columns what amounts and the ordinal number of these columns for a every user. The simplest thing left — to put these sums in the footer. To do this, I first need to create the required number of footer columns. Simple task, but!
I use a drawCallback method *:
drawCallback {
string = innerHTML(needNode).repeat(x_times)
...
}
...and my footer is works.
Then I calculated the page total and I did
window.setTimeout(function(){
$( api.column( columnNumber ).footer() ).html(pageTotal);
},3000);
...but I didn't see any result in empty footer...
What am I doing wrong?
*I cannot use the footerCallback method, because it contain no required object for counting columns.
**If I create a footer manually in HTML, then the right result will be displayed in the correct column. But the footer will be displayed twice: my "tfoot" and automatically created table "dataTables_scrollFoot".
I used the setTimeout() for enough time to create the footer. It works, but does no need effect :(
Help me please. Any help would be appreciated.
...........
Related
I'm trying to scrape data from store: https://www.tibia.com/charactertrade/?subtopic=currentcharactertrades&page=details&auctionid=12140&source=overview
There is no problem with getting data from 1st and 2nd table, but when I goes down, xpath returns only empty lists.
even tried to save response in file:
scrapy fetch --nolog "https://www.tibia.com/charactertrade/?subtopic=currentcharactertrades&page=details&auctionid=3475&source=overview" > response.html
for table with skills everything works good
sword = response.xpath('//div [#class="AuctionHeader"]/a/text()').get()
but when it comes to getting for example gold value, I get only empty list:
gold = response.xpath('/html/body/div[3]/div[1]/div[2]/div/div[2]/div/div[1]/div[2]/div[5]/div/div/div[3]/div[2]/div[2]/table/tbody/tr/td/div/table/tbody/tr[2]/td/div[2]/div/table/tbody/tr[3]/td/div/text()').get()
In chrome/firefox both selectors works smooth, but in scrapy only 1st one
I know there might be some problems with data updated by javascript, but it doesn't look like this case
Doesn't look like it's a javascript problem. Think you're not getting your XPATH selectors correct. It's best to be as specific as possible and not to use multiple nodes down. Here we can select the attribute TableContent to get the tables you want. There you can select each individual table that you require if needed.
Code Example
table = response.xpath('//table[#class="TableContent"]')[3]
gold_title = table.xpath('tr/td/span/text()')[2].get()
gold_value = table.xpath('tr/td/div/text()')[2].get()
output
'Gold: '
'31,030'
Explanation
Using the class attribute TableContent, you can select which table you want. Here I've selected the table with the gold values. I've then selected each row and the specific element which has the gold value. The values are hidden behind span and div elements. get() returns a string, getall() returns a list.
I have created a custom button that will allow users to select with columns to output to CSV so the button is not created as part of the table initialization. I have a modal that pops up with checkboxes created off the column headers for selection. It is worth noting I have regex search on each column header. The issue is I am using server side processing and as a result the only exported rows are those visible. As a work around I have set it up to get the page.info().recordsDisplay and set the length of the page to that and draw. The modal pops up and says it is loading data from server once table is fully populated the HTML of the modal will change to the checkboxes for export. Once exported the table is reverted back to the default length. What I need to do is capture when the rows are fully rendered so I can do the HTML switch. Right now I am setting a timeout. The data can take a while to populate as there are some 13k rows if now search is applied. What is the best way to do this and is there a more efficient way?
var tableHeaders = [];
var table = $('#example').DataTable().columns().every( function () {
tableHeaders.push( $(this.header()).text() );
});
var pageLength = table.page.info().length;
table.context['0']._iDisplayLength = table.page.info().recordsDisplay;
table.draw();
There could be an issue with server-side processing parameters start/length that define the portion of data being requested from the server upon each draw.
If your source data has huge number of rows, chances are they're not sent all at once to make use of server-side processing. So, you can try to manipulate those parameters.
Alternatively, you may try to make use of draw event fired upon each redraw.
Situation:
I have a pandas dataframe which I convert into an html table via df.to_html(). I then add the DataTables class to the table. This DataTables-table has the following columns:
ID | X | Y | Val |...More columns...| Selection_Criteria |...More columns...
The values in Selection_Criteria can be either 1 or 0. I know that with:
$('#ProductList').DataTable( {
...
"fnInitComplete": function(oSettings, json) { $('#ProductList tbody tr:eq(0)').click(); }
});
(Source: http://code.datatables.net/forums/discussion/38171/automatic-select-of-the-first-row-on-reload)
..it is theoretically possible to select the first row. (In reality, I have not been able to simulate a click for the first row.)
But my question goes more towards: How do I automatically pre-select ALL rows where the value is 1 in Selection_Criteria? What is the best approach? Should this be done client/server side?
In pandas the term "select"(ing) means to screen out that which was not selected for. I know that in a table on a web page, selected can mean being highlighted to stand out from the others. There are a couple of ways you can do this on the server side. You could display two tables, one for each state of Selection_Criteria. This would save you the hassle of trying to select individual rows out of a table in the first place (which would be done with Javascript, not Pandas). While pandas has the ability to add a class to the resulting html, the class is applied to the element.
If you are using jquery you are going to use these pieces. as you haven't put example data I can't be exact.
replace x in the next line with the number of columns the Selection_Criteria=1 is across the table
$( "tr td:nth-child(x):contains('1')" ).addClass('selected');
There are solutions on the backend using beautifulsoup and css selectors, or lxml.etree with xpath selectors. But jquery is going to be the most concise with this problem.
#Aliester. Thank you for the pointer!
This helped me find the solution to my own question. What I did:
1.) Identify row index that I want to select when the table loads.
2.) Pass the index to js.
3.) Loop over the indices and apply the following command to each index entry:
table.row(':eq('+hit_index_row+')').select();
So I am using the API to select each individual row. This works for me and hopefully could be helpful to others as well. It may be a bit hacky, so more elegant suggestions are welcome!
You can do this by providing a function for the "rowCallback" option when initializing the DataTable. https://datatables.net/reference/option/rowCallback
Also it is generally better to use the API methods to select rows instead of just changing the class. I found that the DataTable + Select libraries keep an internal collection of selected row indexes (just current page if serverside processing is on) instead of using the class to resolve selected items.
So while the display will look right, if you just change the class, if you rely on any of the API methods to get selected items later on there will be issues. Additionally just changing the class on the row will not fire any of the "select" events on the table so you can't rely on those either.
i need to display tooltips for my table cells. Are there any plugins for that purposes?
Thanks in advance!
You should be able to use any table and tooltip plugins you want - you just need to trigger the tooltips correctly depending on how you are initializing and updating the table.
For example, if you use jQuery DataTables (which I assume you are looking at given the tag you gave your question) with the jQuery UI tooltip widget you could simply initialize the tooltips once you've initialized the table. If you have the tooltip data already in the table, it could be as simple as:
$('#mytable').dataTable().tooltip();
If you have a more complex table that gets updated (such as using deferred rendering for a giant dataset), then you'd probably need to tie into the row creation callback to get the tooltips on any new rows by doing something like this in the init options:
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$('.tooltip', nRow).tooltip()
}
I'm using Dojo 1.5 (including dojox). I have a dojox.grid.DataGrid where each row represents a user. When I click a row, I want to redirect to a URL like /users/USER_ID. The user ID is one of the fields in the grid, so all I need to do in my onRowClick callback is to grab the user ID for the row that was clicked.
The click event contains a rowIndex property, and, indeed, I found a (rather old) post elsewhere that suggested I should be able to do:
var row = dijit.byId('grid').model.getRow(e.rowIndex);
/* (Then grab the 0th field of the row, which is the user ID.) */
(Sorry, I've since lost the URL.)
But my grid object has no model attribute. What's up with that? Has the API changed? (My grid certainly is populated with data, which I can see, click, sort by column, et cetera).
So I'm stuck for now. Note, BTW, that it won't work to use rowIndex to directly access the grid's underlying dojo.data.ItemFileReadStore. That's because the grid is sortable, so there's no guarantee that the grid's rows will be in the same order as the store's.
Any hints would be deeply appreciated. I hope that the question is clear, and sufficiently general that any answers can help others in my predicament. Many thanks.
I have a similar scenario and I grab the value like this:
onRowClick: function(e) {
open_link(my_grid._getItemAttr(e.rowIndex, 'object_path'));
}
In this case my_grid is a reference to the datagrid and object_path is the column where I store the path to the object. open_link is of course a custom function of mine that as it implies, requests a server path.
So just change the specifics to suite your case and you should be fine.