Is it possible to "lock" the top row of the results from dataTables? so that when i scroll through 100s of row results, the top heading doesnt move. I have tried setting a size to tbody and making it overflow in css but that obviously doesn't work.
tbody{
overflow-y:scroll;
height:600px;
}
Yes, it is possible. Sounds like you want to use the DataTables "FixedHeader" extension:
$(document).ready( function () {
var table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader( table );
} );
Source: https://www.datatables.net/extensions/fixedheader/
Related
How to highlight the selected row in v-data-table? i tried to modified the data by adding flag variable selected in the Example
In the above example click on a row will be highlighted by adding class called primary. If it is a static data it is working fine, but if it is dynamic data like getting data from API, the data in the data table will always be refreshed, if i change the pagination and sort and all.
For example, in my case, if i sort the column the data will come from the API and data in the v-data-table will be refreshed with sorted data, in this case it is very hard to maintain that selected flag each and every time when ever the data changes. Is there any other way to highlight a selected row?
<v-data-table #click:row="rowClick" item-key="name" single-select ...
methods: {
rowClick: function (item, row) {
row.select(true);
//item.name - selected id
}
}
<style>
tr.v-data-table__selected {
background: #7d92f5 !important;
}
</style>
or
<style scoped>
/deep/ tr.v-data-table__selected {
background: #7d92f5 !important;
}
</style>
Example
https://codepen.io/nicolai-nikolai/pen/GRgLpNY
Your solution does not work because the selected property is added to the data when you click on a row, but when data is reloaded then the data without a selected property replaces the old data.
So to make it work:
- add an id field to each item in the list of desserts
- add an selectedId with default value -1 to your data
- change the line of code in method activerow to this.selectedId = item.id;
- change the class attribute in the <tr> to :class="{'primary': props.item.id===selectedId}"
If on reload only your list of desserts changes, and the new list contains an item with the same id as selected before, then the same row should become selected.
I forked the codepen example to show you how this works:
https://codepen.io/anon/pen/PrWjxQ?editors=1010
How to make the row clickable is allready explained by others but not how to toggle the row selection. The selection state can be checked through isSelected and then set accordingly.
To style the selected row properly you need something more to take into account: the dark and light theme and the hover css pseudo class - which is overridden through the important tag so we need to restyle it.
Check out the Codepen Example
methods: {
rowClick: function (item, row) {
let selectState = (row.isSelected) ? false : true;
row.select(selectState);
}
}
<style>
.theme--light.v-data-table tbody tr.v-data-table__selected {
background: #f5c17d70 !important;
}
.theme--dark.v-data-table tbody tr.v-data-table__selected {
background: #a17b4970 !important;
}
.theme--dark.v-data-table tbody tr.v-data-table__selected:hover {
background: #a17b49c2 !important;
}
.theme--light.v-data-table tbody tr.v-data-table__selected:hover {
background: #ffd296d2 !important;
}
</style>
I am planning to use Jquery datatable.
I want to select many columns and enable user to select which column to display.
I have found this,
https://datatables.net/examples/api/show_hide.html
But what i want is that toggle line to be a dropdown. How can i do this?
Or is there any other plugin which supports this.???
Take a look at this example here. It's creating the dropdown select element which will toggle the visibility of the column selected.
The code is:
$(document).ready( function () {
var table = $('#example').DataTable();
table.columns().every(function(index, tableCounter, counter) {
$('<option/>').val(counter).text($('#example thead th:eq(' + counter + ')').text()).appendTo('#select');
});
$('#select').on('change', function() {
var visible = table.column($(this).val()).visible();
table.column($(this).val()).visible(!visible);
});
} );
How can I provide a list of columns I want hidden on table load through the ColVis extension?
Also, is there a way to retrieve the list of columns currently visible/hidden?
Specify visible columns
You can set visibility with columnDefs or columns options to target specific columns along with columns.visible option to set column visibility.
For example, to hide a second column initially, use the following options:
var table = $('#example').DataTable({
'columnDefs': [
{ targets: 1, visible: false }
]
});
See this jsFiddle for demonstration.
Get a list of visible columns
You can get a list of visible columns bu using columns().visible() method.
var colVisible = table.columns().visible();
See this jsFiddle for demonstration.
The ColVis extension gives no method to hide columns on load. That is .Datatable() job to do.
To get the list of columns which are visible/hidden you can do something like this
var length = myTable.columns().nodes().length,
result = [];
for(var i=0;i<length;i++){
result.push(myTable.column(i).visible());
}
console.log(result);
Here is a demo http://jsfiddle.net/dhirajbodicherla/189Lp6u6/25/
I am using slick grid to show JSON data.
On external button click i want highlight specific row based on column values.
Such as highlight row which have cost=75 and venue_id =87 and Impression=268
Got solution :
dataView.getItemMetadata = function (row) {
var item = dataView.getItem(row);
if (item["" + columnName+ ""] == colValue)
{
return { cssClasses: 'highlight' };
}
return null;
}
grid = new Slick.Grid("#myGrid", dataView, myColList, options);
The other suggested option seems to be have heavy load on my system, as my system have thousand of records and a particular row have to highlighted and suggested solution kind of refreshes the whole table. For some reasons it is not working for me.
I got around this by using Slickgrid's flashCell. Even no need of getItemMetadata()
var rowId=dataView.getRowById(idvalue);//id of the row to be highlighted, as slickgrid enforced an id field
grid.scrollRowToTop(rowId);//makes the row visible
grid.getColumns().forEach(function(col){//get all the columns
grid.flashCell(rowId, grid.getColumnIndex(col.id));//flash it
})
Hope this helps to coming to this page for the answer.
So I'm a first time user of dgrid, and I'm currently building my tree grid like this:
var SelectionGrid = new declare([OnDemandGrid, Selection, Keyboard]);
var myGrid = new SelectionGrid({
store: myStore,
selectionMode: "single",
style: {
width: '99%',
height: '99%'
},
columns: columns
});
My problem is, the grid shows metadata for features I'm drawing in openlayers. I've written code in openlayers so that whenever I click on a feature on the map, it fires an event to scroll to that item in the grid and select it. The grid, however, doesn't pre-load the children for each parent, it only fetches the children when the parent row is expanded.
Currently I'm programmatically expanding every row and then reclosing them to force it to fetch, but it's terribly slow and ends up causing browser warnings about javascript taking too long to run, etc.
Is this a side effect of using OnDemandGrid? Is there anyway to just have all the data loaded so it's all available when the grid is rendered?
I had another issue and wanted to post another answer in case anybody has the same problem. When not using the Tree plugin and just using the OnDemandGrid, I couldn't programattically scroll to items in the grid that hadn't been loaded because the element for the row was null.
I found a property that tells the OnDemandGrid the minimum number of items to load from the store, and just set it to the length of my data, so it loads everything at once. I know that defeats the purpose/benefit of the OnDemandGrid, but it's the functionality I need. Here's the code:
var SelectionGrid = new declare([OnDemandGrid, Selection, Keyboard, DijitRegistry]);
var grid = new SelectionGrid({
store: store,
selectionMode: "single",
columns: columns,
minRowsPerPage: data.length,
farOffRemoval: 100000
});
Here's the reference for minRowsPerPage and farOffRemoval:
http://dojofoundation.org/packages/dgrid/tutorials/grids_and_stores/
I wasn't able to preload all my data, but I just discovered the glory of dojo/aspect. Now I find the parent item that needs expanded and I just build some code inside an aspect/after block that gets executed as soon as that row is finished expanding/loading:
aspect.after(grid, "expand", function (target, expand) {
var row = grid.row(id);
console.info("found row: ", row)
grid.bodyNode.scrollTop = row.element.offsetTop;
grid.clearSelection();
grid.select(row);
},
true);
grid.expand(item.id, true);