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)
Related
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
I am loving this yadcf plugin an all its options. But for some reason, I cannot get it to filter my data. I want to type in data and have it filter on the fly. I have looked through all the examples on the yadcf site and followed them to the best of my knowledge. I am using JQuery 2.1.4, DataTables 1.10.10, and yadcf 0.8.9.beta.26.
Here is my relevant javascript:
$(document).ready(function() {
'use strict';
var table = $(".stocks").DataTable({
paging: false,
searching: false,
info: false
});
yadcf.init(table, [
{
column_number : 4,
filter_container_id: 'industrySearch',
filter_default_label: "Type industry",
filter_type: "text",
text_data_delimiter: ","
}]);
Let me know if any other code is needed.
You must remove the searching: false, from your datatables init code.
Setting searching to false disables datatables searching abilities, and since yadcf uses datatables search api under the hood that it wont work.
Read here more about this option
I'm using the jquery DataTables plugin.
Is it possible to not load data first time?
I will load data later with different filters applied.
You could use the deferLoading Parameter and set it to 0.
This will delay the loading of data until a filter or sorting action happens.
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"deferLoading": 0,
"ajax": {
url:"scripts/server_processing.php",
'data': {
'dbName': 'willi'
}
}
});
});
More Info here (dataTables 1.10.0)
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'm trying to pass additional parameters to the ajax call that is done after selecting a row then clicking delete button. Here's the code I have:
$('#datatable').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"bFilter": false,
"iDeferLoading": <%= #count %>,
"sAjaxSource": "redraw",
"fnServerData": fnDataTablesPipeline
}).makeEditable({
sDeleteURL: "delete.rb",
oDeleteParameters:
{
foo: WHAT IS ID
}
});
As you can see, I'm trying to send a parameter foo=ID but I'm not sure how to grab the selected ID of the row.
i have used the following function mentioned in the link below to get the id's of the rows that have been selected and sending them via ajax to the serverside where they get deleted.
hope this solves what you were looking for...
http://datatables.net/examples/api/select_row.html