Moving DataTables pagination length dropdown - javascript

I'm trying to move the dropdown that DataTables uses to determine how many rows to display. One way I thought of was to use jQuery's prependTo()/appendTo() functions, but it feels a bit too hack-y. I tried searching through the DataTables API to see if there was some native way of doing it, but I couldn't find anything. I was wondering if there was a better way to do this.
This is basically what I'm trying to do: http://jsfiddle.net/jbZG7/
$("#tableID").dataTable();
$("#tableID_length").prependTo("#new-div-id");
Thanks!

I created a custom dataTables widget which combined jQuery UI Dialog with DataTables. I too needed to move dataTable controls to custom locations, which could not be accomplished with sDOM very much in the same way you need to.
When looking for a solutions I was concerned about .appendTo/.prependTo being too hacky, but as it turns out .appendTo/.prependTo are the best solutions I have found.
$('tableID').dataTable({
fnInitComplete : function( oSettings, json ){
$("#tableID_length").detach().prependTo("#new-div-id");
}
});
Updated jsFiddle
fnInitComplete

Open the dataTables.js file. Look inside and see if you can find anything related to paging. I did a CTRL+F and typed pagination. You want to look for information on where the pager is drawn.
Also...using firebug to set breakpoints in the dataTables.js file might be a big help too.

Related

Is it possible to add totals to observablehq inputs.Table

Is it possible to add a total row in inputs.Table from Observablehq? The idea is to have a column aggregate such as sum or mean. I searched through the inputs.Table documentation, but it does not seem to mention this option. In addition, I could not find any notebook showing this option either. If this option is not implemented in inputs.Table, do you believe it is feasable to improve the source code to have this functionality for someone relatively new to JavaScript? I had a look, and was kinda of lost in the source code, but maybe with a little guidance from someone more experienced, I could be able to modify it by myself. Alternatively, how can one add the totals using an external library?
This isn't something that inputs.Table supports directly. I'm not sure if it is something that the maintainers of that library would want to include, but it is an issue that has come up before: https://github.com/observablehq/inputs/issues/148. I think you could post there to try and get some guidance about how to move forward.
Another thing you could do is to modify the data you are passing to the table to add those rows. I made an example of that: https://observablehq.com/d/ed915b04358db27c. There isn't a way to style those rows separately though.
Using an external library, one can easily generate a table with totals. An example of such a library is Tabulator. Here is an example notebook.

Javascript plugin to do sorting functionality over a HTML table

I have a table which is loading in AJAX, all the data are coming from server side when I click a button from client side. Now I need a sorting functionality in this html table. I have searched and found 5-6 javascript plugins for sorting, but none of them are working. Some are becoming very slow, and some are showing errors. My html table structure is also bit different. Can anyone please help me out to and provide a good js plugin to implement in my code. I am attaching an image of my table structure.
Basically the table has 2 header rows, I need the sorting functionality over the second header row.
If the image is not clear you can refer to this link.
http://awesomescreenshot.com/0b72bfy588
Have you tried datatables?
http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html
Usage is simple
http://datatables.net/usage/
Use Google DataTable or Jquery Datatable, which priovides sorting.. rest you can customize
Have you tried this plugin for sorting your table?
$("#myTable").tablesorter();
http://tablesorter.com/docs/

Javascript Autocomple with multi coulmn and categorized suggestions

Is there any JavaScript autocomplete which can show categorized suggestions in a multicolumn design like the one here http://www.healthgrades.com/. If there is a jquery or YUI plugin that would be better.
It would be better to create your own autocomplete, because you know what data you want to show and how to show, you can use table structure or ul-li structure. One more thing is that your back end all things shown depends on your back end what queries you needed to extract data. Your main issues is only design, as I think.
Here is a MultiColumn plugin you might use.

Need a jquery (or something else) plugin for horiz/vert scrollable table that supports mutiple header rows

I have a html table that is dynamically generated using xsl from a stored proc, and all column sizes/classes etc come from meta-data in the db. I need a plugin of some kind that will enable horizontal and vertical scrolling and be able to handle multiple header rows.
So far I've tried quite a few but most either don't have horizontal scrolling or don't seem to support multiple header rows. Both features are essential. What would you use to do this?
try JqGrid
http://www.trirand.com/blog/
try with this....
http://www.datatables.net/
i m doing the same thing with this plugin.
I ended up going with the plugin here fixedtableheader jquery plugin as it was the only thing I found that could handle my badly formatted html. Despite being a little unusual in design it works nicely.

Table Template with Rich UI

I'm trying to find a html (or maybe flash) table template with rich ui features. I googled it, but couldn't find something that has a rich ui, also looked through jQuery, still no luck. Before going any deeper search, I believe someone may have suggestions for me.
If you're looking for tables with lots of features you might want to take a look at ExtJS Grids (You have to click on Grids section to take a look at the demos).
jQuery has the TableSorter plugin but that is a simpler option.

Categories