I am using jquery datatable (example).
I want these changes:
I want to change the options of show entries dropdown.
I want to use show entries, search and paging footer in some different div (other than the div in which my table reside). Want to keep them apart as these are always keep sticking to the table.
When I use paging the table shoud not move. It shoud be fix in boundaries.
I want to change the options of show entries dropdown.
Use the aLengthMenu parameter:
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
I want to use show entries, search and paging footer in some different
div (other than the div in which my table reside). Want to keep them
apart as these are always keep sticking to the table.
Use the sDom parameter. You can inject divs and customize existing ones with custom classes.
When I use paging the table shoud not move. It shoud be fix in
boundaries.
Add fixed width and height to your table.
If you check examples and options reference you will surely find your answers. This, this and this may help you with point 2.
Related
I am building a table with user selected columns. The user has 2 different view options. 1 with everything contained in the body with a scroll bar and 1 with everything expanded and sticky headers. The user can click a button to expand the table. I am using Jquery to add a class to the user table to expand it.
Normal Table -
Expanded Table -
The issue I am having is that if only a couple of columns are selected and the user is in expanded view it looks really strange.
What I would like to do is if the table's width is smaller that the body(white background) then remove the expanded class and revert to normal view.
I have tried
if (window.getComputedStyle(document.getElementById('userTable')).width <= window.getComputedStyle(document.getElementsByClassName('siteBody')[0]).width) {
$('#userTable').removeClass('isExpanded');
$('.siteBody').removeClass('expandContainer');
}
Any help would be awesome! Thanks in advance and stay safe.
I think your code should work with this small change:
if (window.getComputedStyle(document.getElementById('userTable')).width <= window.getComputedStyle(document.getElementsByClassName('siteBody')[0]).width) {
$("#userTable").removeClass('isExpanded');
$('.siteBody').removeClass('expandContainer');
}
You have to put the jQuery selector #userTable within quotes, otherwise jQuery would not be able to figure out which element to perform the removeClass action for.
doc says autofits Changes the width of the columns of the current range to achieve the best fit, based on the current data in the columns. So it's based on the data in the columns.
Now I have an example: input 'aaaaaaaaaaaaa' in A1 and 'aaa' in A2, and I execute ctx.workbook.worksheets.getActiveWorksheet().getRange("A2").format.autofitColumns(); but it autofits according to the A1's content rather than A2's, but what I want is the later one, is there any way to achieve this please?
Thanks, I can repro this issue, I think our behavior API aligned with when double click the resizable button in column, it will resize according to the content of the whole column.
A bug(#3984867) was created to track this issue, Team is investigation on it.
,
I'm using free-jqGrid and jqGrid has the option to place selection checkboxes for you onto the grid. On my grid I have two columns in the beginning which is placed by jqGrid and not backed up by my own data: a record number column 'rn' and the checkbox for record selection 'cb' (multi select in my case).
I feature the jqGrid on a bootstrap website, so when the loadComplete event hits, I add 'from-control' class to a lot of edits, like the per column search boxes and basically every edit I can find on the page. (I also replace every ugly little icon to glyphicons. I manipulate the DOM of the toolbar buttons so they become real buttons, so they look nicer and chardin.js work well for example. And so on and on and on. The end result is much better than the original. BTW, I'm not sure if that's the best practice, I couldn't find a better way to make jqGrid more bootstrappy, but this can be another question).
When you apply form-control class to a checkbox, it bloats up. That's beneficial, because it's much easier to click on it, you don't need to have a magnifier glass (like for the original tiny checkbox). I can nicely resize the columns for all those data columns what I supply data for, but I cannot figure out how to widen the cb column so it can accommodate the bloated up checkbox.
I tried adding a configuration for that column in my colModel:
Both
{
name: 'cb',
width: 38,
align: 'center',
sortable: false,
}
and
{
width: 38,
align: 'center',
sortable: false,
}
failed, I got an error from jqGrid stating that the number of colModels doesn't match the number of supplied data. That's true, because the data behind the cb column is not backed up by me.
I tried in the loadComplete
var $ajaxGrid = $("#ajaxGrid");
$ajaxGrid.jqGrid('setColProp', 'cb', { width: 38 });
That didn't give me an error, but also didn't change anything. Maybe I should put it into another event handler? Which?
Then I tried to go down the rocky road of manipulation:
$("#ajaxGrid_cb").css("width", "38px");
$(".td_cbox").css("width", "38px");
As you see I separately widen the header and the td elements. But this causes the table horizontal scrollbar to appear. Yuck! I tried to tumble deeper into the hacking hole, and make a wider column on the grid narrower to make the scrollbar disappear, but this didn't help:
$("#ajaxGrid_Name").css("width", "435px");
$('td[aria-describedby="ajaxGrid_Name"]').css("width", "435px");
There must be a way. Now it's ugly. Screenshot:
(Another style problem you can also see is for the Combined column I specify align: 'center' in the colModel but it has no effect.)
You can use multiselectWidth to specify the width of the multiselect column:
multiselectWidth: 38
One more alternative: you can change the columns width later using setColWidth which is the part of free jqGrid. I introduced the method originally in the answer as plugin to old jqGrid versions. Thus the following, for example, will work too:
onInitGrid: function () {
$(this).jqGrid("setColWidth", "cb", 38);
}
The onInitGrid callback or jQuery event "jqGridInitGrid" are good place, where you can modify the grid before the data will be loaded.
P.S. I'm working now on including better support of Bootstrap in free jqGrid. Probably you will just need to use guiStyle: "bootstrap" in the next version of jqGrid to make jqGrid be "in Bootstrap style".
This question is best read with the fiddle open ;). I've got a tables inside a table. The inside grey tables need to be sorted in there own container. So the grey rows can only be moved in the grey table. But the white rows need to move there grey table with them. So you cannot move a white row or a grey table on there own, they are connected.
Here is my fiddle for what I got right now:
fiddle
options = {
helper: (event, ui) ->
children = ui.children()
view = ui.clone()
view.children().each (index) ->
$(#).width(children.eq(index).width())
return view
}
$('#ccc').find('tbody').sortable(options)
I've been cracking my head on this all day but I cannot figure out how to like a grey table to a white row.
With your current html structure this is quite difficult to achieve.
First of all you need two sortables (one to sort big chunks with white headers and second to sort inside grey tables).
You want to be able to move big tables with small ones inside but as these were all inside sibling elements (tr) it was not really possible (so I've added multiple <tbody>s in there).
Anyway here's the working fiddle: https://jsfiddle.net/9vmvjqm4/5/
You still need to exclude thead from being sortable. I don't like CoffeeScript so I left that (add items : ':not(thead)') to options (or sth like that, there are topics how to do that on stackOverflow).
Also, have a look at this: http://johnny.github.io/jquery-sortable/
I have a simple JSON like so:
[{"NAME":"Bill","Score":25,"URL":"Bill.html"},{"NAME":"Jane","Score":16,"URL":"Jane.html"},{"NAME":"Xavier","Score":5,"URL":"Xavier.html"},{"NAME":"Hector","Score":32,"URL":"Hector.html"}]
The actual JSON has many more records. I would like to display all the records on a page like so:
1) In a grid (boxes, no title rows, only the NAME and SCORE appearing in each box and when clicking on the box takes you to the URL).
2) As people's names are added to the JSON, the grid will automatically resize each box to allow for new boxes for the new names - the grid always uses up 100% of the width and height of the parent div
So, if there were only two names in the JSON, the screen would be split in half (horizontally or vertically). If there were three names in the JSON, there would be three boxes (each using 1/3 of the div). Four would have two rows and two columns, etc... The actual JSON will have at least 50 records, so maybe 9 columns and 6 rows (empty cells would be at the bottom right) but could end up having 200 records (in which case the boxes would dynamically shrink to allow for needed space).
Essentially I'm hoping for some kind of plugin which could create this grid with a dataset with as few records as 10, but as large as 500.
I'm not sure if I'm being very clear...I've been reading up on JQuery templates, I also ran across these:
http://www.zachhunter.com/2010/04/json-objects-to-html-table
jQuery function to create table using JSON data
http://mvc.syncfusion.com/demos/ui/grid/Editing/JSONCRUD
http://www.9lessons.info/2009/10/json-jquery-ajax-php.html
I'm not sure which is the best approach, or if there is an even easier approach. I'd really appreciate any advice you can give.
You can use the Isotope plugin
It is too simple to configure
$('#container').isotope({
// options
itemSelector : '.item',
layoutMode : 'fitRows'
});