i want to solution for this critical issue that when i fast typing for searching and filtering data then automatically my session break and i redirect to my logiin page . why this happend ?
↧
when i fast typing in search box input then suddenly automatic my session break why ?
↧
How do I do this in DataTables?
which I am trying to use in conjunction with an extremely large data source (upwards of 1,000,000 records). In my web application, I have an API that can call on this information, we'll just call it mysite.com/ajaxCall. It returns an array in the formatI have built the API to accept a number of URL parameters, including limit and offset (functioning exactly as their SQL commands), and sortAsc and sortDesc accepting column names.
What I want to implement is have Datatables call only the data it needs from /ajaxCall to display immediately. as opposed to calling all data at once and making the application unusable. I've included a mockup of examples of that in action
↧
↧
Setting $.fn.dataTable.defaults not working
Hi. I'm pulling my hair with an issue I found I can not resolve:
I have a table which is created using a given Web Component I can NOT modify **in any way (as it's part of my company's library of components).
The thing is the component Initializes a new Table with some parameters, BUT I want to add/extend with some new keys to the configuration options. I wrote the following code in order to push columnsDef without any success:
First HTML loads the plugin:
<script src="datatables.min"></script>
Then HTML has following logic:
<script>
$.extend($.fn.dataTable.defaults, {
"columnDefs": [ {
"targets": [1],
"visible": false
} ]
} );
</script>
Then, the library component loads with the following code (typescript):
const options = this.getDatatableOptions();
this.api = this.$(tableElement).DataTable(options);
getDatatableOptions() {
const options: any = {
dom: "Bt",
buttons: ["copy", "excel", "print"],
pageLength: parseInt(this.itemsPage, 10),
paging: this.pagination
};
And Finally my table loads data:
tablaJS = document.querySelector("#listingTable");
tablaJS.ajax.url("http://localhost:8081/src/js/MOCK_DATA.json").load();
From the code above I was expecting to see column 1 turn invisible according to columnDefs
Anything what I'm doing wrong?
↧
how in the handler to write a value to the control displayed by the table
my test case is http://montaj.vianor-konakovo.ru/goods_new.html/. I need when I click on the plus in the penultimate column, I need to write 1 to the previous column, it displays editbox.
ya pytalsya eto sdelat' v obrabotchike
35/5000
I tried to do this in the handler $('#goods tbody').on('click', 'tr .position', function () { located in file goods1003_new.js.
but I didn’t succeed. What's my mistake?
↧
jquery data table export pdf, excel and csv col span with header and rows are not working
Hello Everyone i want to add colspan and row span in my exported pdf file. I generate mutliple header grid. but problem is something related to syling when i going to export this it's add line please check the snapshot i want to remove the line the vertical line and add text align in center
i want something like this
Hery is my jquery code
$('#example').DataTable({
searching: false, paging: false, info: false, ordering: false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
exportOptions: {
columns: "thead th:not(.noExport)",
rows: function (indx, rowData, domElement) {
return $(domElement).css("display") != "none";
}
},
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="C"]', sheet).attr('s', '2');
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: "thead th:not(.noExport)",
rows: function (indx, rowData, domElement) {
return $(domElement).css("display") != "none";
}
}
},
{
orientation : 'landscape',
pageSize: 'A3',
extend: 'pdfHtml5',
exportOptions: {
columns: "thead th:not(.noExport)",
rows: function (indx, rowData, domElement) {
return $(domElement).css("display") != "none";
}
}
,
customize: function (doc) {
doc.defaultStyle.alignment = 'center';
doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');
var tblBody = doc.content[1].table.body;
doc.content[1].layout = {
hLineWidth: function (i, node) {
return (i === 0 || i === node.table.body.length) ? 2 : 1;
},
};
},
}, {
extend: 'print',
}
]
});
↧
↧
How to set scrolling effect to visible rightmost part of the table by default?
https://datatables.net/examples/basic_init/scroll_xy.html
I want to make visible the E-mail column by default(table is on the link). This is possible by positioning the scrollbar to right. How can I do this?
↧
Can't get columns to go to their correct width with tabs
resolved, please delete!
↧
SearchPane - feedback
This thread is for feedback of the SearchPane blog post.
SearchPane is currently "experimental", in the sense that it hasn't been released as a full extension for DataTables and all that entails, as I would like to get some early feedback on the software. Is it useful? What is it missing? I'll maintain a list of requests in this post so we don't end up with too many duplicates.
Regards,
Allan
Feature list
- Full support for Bootstrap, Foundation, Semantic UI, etc.
- Server-side processing support (loading data from the server-side)
- Have the count show two numbers - the first would be how many remain in the filtered set and the second would be how many in the table overall.
- Ordering of data to match the DataTable
- Search the search pane!
- Rebuild API method for selected columns
- Collapsible container
- Support for array based data
- Interfacing with the global search (difficult?)
- Selection options similar to Select (e.g.
osandmulti, etc.) - Option to match column visibility (with or without Responsive?)
↧
Resonsive table is not working iusing tabs
I setup two table using tabs, and both tables work perfect in the full browser but on mobile first one works great but second is not hiding columns using responsive 
If I set them up separately they both work fine in responsive design
or
If I swap the tables the first tab works fine but when I click on the second tab it's not
↧
↧
Populating columns based on JSON nested list
I have the following JSON that I am using to populate a datatable:
{
"results": [
{
"cycle_day": 5,
"date": "<a href=\"/edit/1/17/2020/\">Friday, Jan 17, 2020</a>",
"arche": "<div class='vert'>Goddess, Maiden</div>",
"mp": "<img src='/static/images/luna/last-quarter.png' style='width:21px;'>",
"astrology": null,
"food": "PR",
"water": "PH",
"sleep": "11.0",
"moon_center": {
"name": "Lips"
},
"happening_acts": [
{
"name": "test act 2",
"slug": "test-act-2",
"count": 1
},
{
"name": "ajt test act 1",
"slug": "ajt-test-act-1",
"count": 1
},
{
"name": "JOURNAL",
"slug": "journal",
"count": 1
},
{
"name": "STRETCH",
"slug": "stretch",
"count": 1
}
]
}
]
}
Is there a way that I can split up happening_acts into the four sections that you see above, and then insert the "count" value into the a column that is associated to that section's "name" or "slug" field?
Here is my HTML:
<table id="entries" class="table table-striped table-bordered" style="width:100%" data-server-side="true" data-ajax="/api/entries/?format=datatables">
<thead>
<th class="roro" data-data="arche"><span>archetype<span></th>
<th class="roro" data-data="cycle_day"><span>cycle day</span></th>
<!-- <th class="roro" data-data="day_name">day</th> -->
<th class="roro" data-data="date">date</th>
<th class="roro" data-data="mp"><span>moon</span></th>
<th class="roro" data-data="astrology"><span>astro</span></th>
<th class="roro" data-data="food"><span>food</span></th>
<th class="roro" data-data="water"><span>water</span></th>
<th class="roro" data-data="sleep"><span>sleep</span></th>
<!-- <th class="roro" data-data="reflection"><span>reflection</span></th> -->
<th class="roro" data-data="moon_center.name">mooncenter</th>
<th class="roro selfcare" data-data="happening_acts.journal"><span>JOURNAL</span></th>
<th class="roro selfcare" data-data="happening_acts.stretch"><span>STRETCH</span></th>
<th class="roro selfcare" data-data="happening_acts.ajt-test-act-1"><span>ajt test act 1</span></th>
<th class="roro selfcare" data-data="happening_acts.test-act-2"><span>test act 2</span></th>
<th class="roro selfcare" data-data="happening_acts.stretch"><span>STRETCH</span></th>
<th class="roro selfcare" data-data="happening_acts.journal"><span>JOURNAL</span></th>
.....
</tr>
</thead>
</table>
I appreciate any and all help. This is a great community.
↧
Last column always hidden
I am using Responsive with Bootstrap 3 as described in this example.
It is working great, except that the last column is always hidden. If I shrink the window and refresh the screen, it is still hidden. But, if I expand the window even one pixel, the last column appears.
It seems like datatables is calculating the viewport width as one less than it was rendered and hiding the last column. Do I need to put my table in a certain container, or add a certain type of padding to ensure that the viewport has a few pixels of padding?
↧
last column automatically going to dropdown on responsive
Hello,
Instead of showing all the columns at large screen, the last column automatically going to dropdown.
how do i fix this, any help will be appreciated
↧
Load multiple datatables in the same page
Hello!
How I said in the main title, I have a project that contains almost 30 datatables in differents pages. But, lot of them maybe loads in the same page (for example, when I go to see the details of a user, I load 5-6 datatables).
Now I have all the code in the same page, repeat the code 5-6 times, and I don't want it. I'm working with Laravel, but this is not important, because if I work with ASP NET MVC will be the same. So, the question is: How it works for load more than a datatable in the same page for not repeat code?
I thought the possibility to create a base datatable (like a view) and inyect in the view like @include (or @viewbag in MVC), but I don't know if this is a good solution.
Any idea?
↧
↧
Search Panes Button Bug
Checking out the New extension and found a small issue when looking at the Search Panes Button example. In the console I see this error when clicking the button:
Uncaught TypeError: d._panes.adjust is not a function
Doesn't affect the operation.
Also noticed there is no option for Search Panes in the Category drop down for this New Discussion.
Kevin
↧
Inline Editing Submit onChange instead of onBlur
I have my table nice and happy. Only certain fields are editable inline, they are editable with a drop down select list.
If I edit a field and click off the datatable (or click a non-editable filed) all is ok.
But if I click off a select editable field straight onto another editable select field, then I get this error in the console:
TypeError: g is undefined
To fix it, I thought I could change the line below:
editor.inline( this, {
onChange: 'submit'
} );
To this:
editor.inline( this, {
onChange: 'submit'
} );
But it didnt work. Any ideas or alternative thoughts?
↧
Display Selection Info When Style is 'api'
I noticed when I switched the select.style to 'api' that the selection information disappeared. Setting it back to 'os', etc. causes it to return. I need to programmatically select/deselect rows (via a checkbox) and still want to see the info. Is this possible? Do I need to do something additional when controlling selection manually?
I also noticed that table.select.info() returns an API object rather than true or false (a boolean). This seems like bug and I am not sure if it is related.
↧
Editor Modal Width in Bootstrap 4
Is there a way to increase the modal width? At present, the width is 500px, which is the size of a BS4 standard modal. Can it be increased to modal-lg?
Many thanks for your help in advance.
Kind regards
↧
↧
table header width not aligned with body width
I am using datatables jquery, When running the application, the header width is not aligned with the body width.But when I click on the header, it is getting aligned with the body width but even then there is some light misalignment.
↧
Change Align Export Title, Top Message and Bottom Message
How do I change align and font style for export title, top message and bottom message? The export title, top message and bottom message keep show in center when I export Excel or PDF file. Here is my code.
buttons: [
{
"extend": 'excelHtml5',
"className": 'btn btn-table-excel',
"init": function( api, node, config) {
$(node).removeClass('dt-button')
},
"title": exportTitle,
"messageTop": exportMessageTop,
"messageBottom": exportMessageBottom
}, {
"extend": 'pdfHtml5',
"className": 'btn btn-table-pdf',
"init": function( api, node, config) {
$(node).removeClass('dt-button')
},
"title": exportTitle,
"messageTop": exportMessageTop,
"messageBottom": exportMessageBottom
}
],
My DataTables version is 1.10.13 and my DataTables Buttons version is 1.6.1
↧
multi column sort on hidden value
Hi,
I have a column in my table that displays either the status "active" or "inactive" based on if a numeric value is zero or not. If the value is greater than zero than it shows active, otherwise it'll show inactive.
When sorting by this status column, I want it to be sorted by numeric value ascending or descending
even though I am only showing the active and inactive value.
I also need the table to support multi column sort, so that when user sort the status column, it'll sort secondary by thiis date column. For example, the group of "active" rows will then be sorted by date and the group of "inactive" rows will be sorted by date also. However, the date is sorted by the group of numeric values instead of active and inactive.
So if a group of rows share the same number, the date will be sorted within that group where I want the date to be sorted within the group of active instead. Let me know if i can clarify more.
↧