I cannot figure out the way to solve this. Ive tried adding "table-layout:fixed" but it no longer works in dt's current version.
Thanks
var config = {
"bFilter": false,
"bInfo": false,
"bPaginate": true,
"scrollY": 200,
"table-layout":fixed,
"data": dataoMine,
"bAutoWidth": false,
"columns": columns,
"scroller": true,
"language": {
"emptyTable": "empty data"
},
"columnDefs": [
{"className": "dt-center", "targets": "_all"}
]
};
<table class="dataTable" style="width:80%; height:100%; margin-left:10%; margin-right:10%;}">
<thead><tr>
<th>a1</th>
<th>a2</th>
<th>a3</th>
<th>a4</th>
<th>a5</th>
<th>a6</th>
<th>a7</th>
<th>a8</th>
</tr></thead>
</table>
I don't quite have enough information to give you a firm answer, because you don't tell us what's in your columns variable and don't give us the structure of your dataoMine array. But, it seems pretty clear from your screen shot that you have four columns of data, and also have eight columns specified. That will show all the columns and whatever background you have for the missing data columns. Presumably, your "barbershop stripes" are the page background in whatever theme you are using.
Make sure that you have the same number of columns in your data that you have in your column specification, and see if that fixes your problem.
After researching it turns out that this problem is very common. It seems there is no definitive solution but this worked for me:
add this into dt's config:
scrollX: 100%
i fixed my problem by just adding
scrollX: true
Related
I just created a project based on the https://github.com/antfu/vitesse template. But I've some formatting issue.
If I ask for formating in VS Code, each "first" attribute of an html element is on the same line as the start of element, which is something I would have expected, but it raises warning:
Expected a linebreak before this attribute.eslintvue/first-attribute-linebreak
or sometimes:
Expected indentation of 2 spaces but found 4 spaces.eslintvue/html-indent
If I hit Ctrl+S, then I get no errors anymore, all the attributes(including first one) are on a new line.
Honestly, I don't really care which is kept, but how to synchronize the two of them? It jumps a lot every time I format and it's disturbing.
Thank you very much
EDIT
After #tony19's comment, I tried to set volar as default formatter. So my .vscode/settings.json looks like:
{
"cSpell.words": [
"Vitesse",
"Vite",
"unocss",
"vitest",
"vueuse",
"pinia",
"demi",
"antfu",
"iconify",
"intlify",
"vitejs",
"unplugin",
"pnpm"
],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.keystyle": "nested",
"i18n-ally.localesPaths": [
"locales"
],
"i18n-ally.sortKeys": true,
"prettier.enable": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.associations": {
"*.css": "postcss"
},
"editor.formatOnSave": false,
"editor.defaultFormatter": "Vue.volar"
}
But I've still the same behavior. shift+alt+F format like this:
<div id="simple"
class="toto">
index
</div>
and when I save, it formats like this:
<div
id="simple"
class="toto"
>
index
</div>
I must admit that I'm not a big fan of having the end > on a single line but as far as the comportment is coherent I'm happy
(I also tried "editor.defaultFormatter": "dbaeumer.vscode-eslint" and "editor.defaultFormatter": "antfu.vite" without any luck.
I'm trying to sort by a column in datatables, while having the sorting disabled.
var table = $('#example').DataTable({
"order": [3,'desc'],
"ordering": false
});
Will try to be clear as possible by showcasing the issue in this example: http://live.datatables.net/focajayi/1/edit
As you can see, I'm trying to sort by Age in descending order, but it won't sort it, unless I set 'ordering' to true.
I'm aware that I can do this with hacks, or the prettiest solution that I know of so far, would be to remove the ordering attribute, and use the columnDefs instead, which seems to work as expected, but I would like to know if there's a global solution, without having to build the columnDefs data.
After a bit more research I found a close enough solution.
So what I've done, is just set the ordering to true, and then specifying it in the columnDefs.
var table = $('#example').DataTable({
"order": [3,'desc'],
"ordering": true,
"columnDefs": [{
"targets": "_all", "orderable": false
}]
});
Turns out it's possible to use the '_all' keyword to apply for all columns.
I was worried in always having to maintain the columnDefs list, but with the '_all' target it's perfect.
I'm having issue when search text box are in the footer position. The search box is not functional when setting filters_position: 'footer' to yadcf. When setting is removed the text search box do there thing. Anything else I need to do? Thanks in advance and Awesome plug-in.
https://jsfiddle.net/4hqm9tsh/2/
Setting scrollX: to false I'm now able to search with in the column. I'm hoping to keep this true.
{
column_number: 6,
filter_default_label: "",
filter_type: "text",
style_class: 'yadcf-sb',
filter_delay: 1000,
filter_reset_button_text: false
},
],
{ filters_position: 'footer' }
It was a bug in yadcf which I just fixed and released in new 0.9.3.beta.8,
see it in action here
If you will encounter this in other filter type please open a bug in yadcf repository.
It seems that specifying scrollY in the DataTables settings is causing the footer not to filter anything. Needs fixing.
I try reuse 1 table with different amount of data based on different button click, I able to populate data successfully, but the problem is, the header did not populate correctly, I had debug and see the correct amount of column pass into table, but why it still retain the design from the 1st click? the 1st data from the 1st click have 3 column, but in the 2nd click, it still retain the same 3 column instead of 8 column? how to make the header populate correctly?
I try to destroy and recreate, but the code not working well if declare before the table create, any idea?
//if ($.fn.DataTable.fnIsDataTable($(selector)[0])) {
// $(selector).dataTable.fnClearTable();
// $(selector).dataTable.fnDraw();
//}
var oDataTable = $(selector).dataTable({
"sDom": _sDom,
"sPaginationType": "bootstrap",
"bDestroy": true,
"bServerSide": true,
"bFilter": true,
"bStateSave": true,
"bSort": tools,
"bAutoWidth": false,
"sAjaxSource": source,
"fnServerParams": function (aoData) {
aoData.push({ "name": "sParams", "value": params });
},
"bProcessing": true,
"oLanguage": {
"sLengthMenu": _displayLen
},
"aoColumns": cols
});
1st button click
2nd button click
Ok, found the answer, after fndestroy, I still need to remove header from table before recreate a new set of header
$(selector).find('thead tr th').remove();
I cannot make it to work properly.
I need on initial load to have my table sorted by 0-index column in 'desc'.
I've tried:
$(function() {
ordersTable = $('#orders').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": 'full_numbers',
"bDestroy": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{% url get_orders %}",
"aoColumnDefs":[
{"aTargets":[0], "asSorting": ["decs", "asc"]}
]
});
and what it does is sends "sSortDir_0 :'asc'" and displaying "asc" active after that.
How can it make it work? (without faking click on the column to resend the ajax)
Thanks
Ok, I guess I've found it: aaSorting and aaSortingFixed sets the initial sorting. (reference here)