Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 81403 articles
Browse latest View live

Ignore empty cells when sorting while server side processing is enabled

$
0
0

Before I move to server side processing, I was using a custom sorting method to ignore empty cells when sorting.

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    'dateNonStandard-asc': function (a, b) {
        var x = Date.parse(a);
        var y = Date.parse(b);
        if (x == y) { return 0; }
        if (isNaN(x) || x < y) { return 1; }
        if (isNaN(y) || x > y) { return -1; }
    },
    'dateNonStandard-desc': function (a, b) {
        var x = Date.parse(a);
        var y = Date.parse(b);
        if (x == y) { return 0; }
        if (isNaN(y) || x < y) { return -1; }
        if (isNaN(x) || x > y) { return 1; }
   }
});

Since this is a client method, look like it's no longer works as I'm using server side processing.

Complete Code

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    'dateNonStandard-asc': function (a, b) {
        var x = Date.parse(a);
        var y = Date.parse(b);
        if (x == y) { return 0; }
        if (isNaN(x) || x < y) { return 1; }
        if (isNaN(y) || x > y) { return -1; }
    },
    'dateNonStandard-desc': function (a, b) {
        var x = Date.parse(a);
        var y = Date.parse(b);
        if (x == y) { return 0; }
        if (isNaN(y) || x < y) { return -1; }
        if (isNaN(x) || x > y) { return 1; }
   }
});

$('#minio-data').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "/data-src",
    columnDefs: [
       { type: 'dateNonStandard', targets: [-1, -2] }
    ]
});

How can get the same client side sorting behavior when server side processing is enabled?

Thank you.


Inline editor and submitting all cell data at once, instead of submitting individual cell changes

$
0
0

When using inline editor to edit the cells of a DataTable, the default behavior is to submit the changes to the server when the cell is blurred. This results in a separate AJAX call for each cell edit. What I would like is to use a button to submit ALL changes at once after the user is done editing the table, instead of individual cell submissions. Anyone know how to do this?

statesave type option for child row state - class of open row

$
0
0

i have been modifying a datatable to add a child row - as the number of fields displayed was making the row a bit cluttered - much better now !

Most elements of the child row are links to related pages, each with a back button to my main page.

what i would like to do is retain the child row in its open state when going back to the page.

using information in another thread

https://datatables.net//forums/discussion/comment/88178/#Comment_88178

I can store the indexes of the open child rows in an array, and use localStorage to retain the values

on initComplete i am using the values stored in localstorage to show the child rows, but i cannot get the class of the open row to display as 'shown'

code to store open rows...

        var openTableRows = JSON.parse(localStorage.getItem('openRows'));

$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');

            rowIndex = row[0][0];
            var idx = openTableRows.indexOf(rowIndex);
            openTableRows.splice(idx, 1);
            localStorage.setItem('openRows', JSON.stringify(openTableRows));
            //console.log(JSON.parse(localStorage.getItem('openRows')));

    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');

            rowIndex = row[0][0];
            openTableRows.push(rowIndex);
            localStorage.setItem('openRows', JSON.stringify(openTableRows));
            //console.log(JSON.parse(localStorage.getItem('openRows')));
    }
} );

code to re-open previously open rows...

initComplete: function ( settings, json ) {

        var table = $('#example').DataTable();
        table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
        openRows = JSON.parse(localStorage.getItem('openRows'));
        openRows.forEach(function(entry) {
        var tr = entry;
        var row = table.row(tr);
        row.child(format(row.data())).show();
        })
        })

        }

if I add tr.addClass('shown'); to the block above, i get error tr.addClass is not a function

Inline editing

$
0
0

Very new to the grid - is there a way to allow editing in the grid itself? Inherited a program from someone who left the company. My code - apologies for the length - is as follows:

$(document).ready(function () { $("#@string.Format("{0}_List", modelName)").dataTable({ "sDom": '<"H"lr<"export_info"T>f>t<"F"ip>', "oTableTools": { "sSwfPath": "/Content/Themes/base/DataTables/swf/copy_csv_xls_pdf.swf", "aButtons": [ { "sExtends": "xls", "sToolTip": "Save as Excel", "mColumns": [1, 2, 3, 4] @* NOTE: set the column indexes of the columns you wish to be included in the exported file *@ }, { "sExtends": "pdf", "sToolTip": "Save as PDF", "mColumns": [1, 2, 3, 4], @* NOTE: set the column indexes of the columns you wish to be included in the exported file *@ "sPdfOrientation": "landscape", "sPdfMessage": "Exported on @System.DateTime.Today.ToShortDateString()" }, ] }, "inline": true, "bPaginate": true, "sPaginationType": "full_numbers", "bStateSave": true, "iCookieDuration": 1209600, "aLengthMenu": [ [10, 20, 50, -1], [10, 20, 50, "All"] ], "iDisplayLength": 10, "bJQueryUI": true, "aoColumnDefs": [ { bSortable: false, aTargets: [0] } ] }).columnFilter({ aoColumns: [null, { type: "text" } , { type: "text" } , { type: "text" } , { type: "text" } , { type: "text" } , { type: "text" } , { type: "text" } , { type: "text" } , { type: "text" } , { type: "text" } , { type: "text" } , { type: "text" } ] }); // Refresh button $("#@string.Format("btnTo{0}_refresh", modelName)").click(function () { location.reload(true); }); }); // Delete confirmation $(function () { $(".deleteButton").click(function () { // get the ID of the record stored in the data-id attribute var id = $(this).data("id"); alertify.set({ labels: { ok: "Yes, Delete It", cancel: "No, Don't Delete" } }); alertify.confirm('

Are you sure you wish to delete this record?
This CANNOT BE UNDONE!

', function (clickedYes) { if (clickedYes) { $.ajax({ type: "POST", url: "/@ControllerName/Delete/", data: { id: id, __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() }, success: function (response) { alertify.success("Successfully Deleted"); window.location = "/@modelName"; }, error: function (xhr, ajaxOptions, thrownError) { if (xhr.responseText !== "") { alertify.alert(xhr.responseText); alertify.error(xhr.responseText); } } }); } }); // IMPORTANT: we need to reset the Ok and Cancel button labels back to the defaults alertify.set({ labels: { ok: "Ok", cancel: "Cancel" } }); }); });

THANK you very much for any assistance.

Replace commas with dots

$
0
0

Hi,

I have some fields where I use "float" numbers (e.g. 2.81) and when I copy values from a source the numbers will be provided with a comma (like 2,81).

Is there a solution to replace the comma while/after paste it into the field?

Thanks in advance

Patrick

dateformat

$
0
0

Hi,

in my example I tried to set a dateformat in this way:
{
label: "SellDate:",
name: "sellDate",
def: function () { var d = new Date(); return new Date(d.getFullYear(), 11, 31); },
type: "datetime",
dateFormat: "dd.mm.YYYY"
},

or
{
label: "Date:",
name: "_stocks_fees.date",
type: "datetime",
dateFormat: "dd.mm.YYYY"
}
but it seems that the dateFormat variables were ignored and the date in the form and in the tables is still YYYY-MM-DD.

What did I wrong?

Thanks for any support

Patrick

On handling NULL values

$
0
0

When developing a multi-database solution, Editor seems to be ambivalent with NULL.
This conversation mentions that as of 1.7, Editor treats NULL as an empty string: https://datatables.net//forums/discussion/comment/9706/#Comment_9706

Empty strings don't really work for many situations. Take for example the nullable integer field, "FavoriteNumber".

  • User opens an edit form with "FavoriteNumber" and 50 other fields. "FavoriteNumber" and other null (and empty but not null) values are shown as an empty string.
  • User changes some fields but does not modify "FavoriteNumber".
  • When user submits, Oracle interprets the empty string as NULL and writes a NULL. This non-standard and quirky behavior is actually useful in this one case.
  • When user submits to Microsoft SQL, the empty string is interpreted as 0 (zero), so the user has changed the value of the field even though they did not intend to.
    This to me is not ideal, and I can't really find an easy way to deal with it. For example, if I set fields.defto null, an empty string still appears to be sent.

I think Editor should handle NULLs, which are absolutely a reality of database interaction.
This begs the question, "How can Editor handle NULLs?!"
Some ways that come to mind include:

  1. For nullable fields (specified in Editor init or something), generate a checkbox for NULL. I kind of dislike this.
  2. def:null sets the value to null instead of an empty string (or maybe def:undefined or similar)
  3. Interpret some probably user-specified sentinel value as NULL, for example, "(null)", and set the field to this value when the incoming JSON for that entry is null.

I am sure it's more complex than this, for example, how can null be specified in HTML or over an HTTP POST or GET.
Perhaps an internal sentinal value of Ø, which is HTML &#216; or URL-encoded as %C3%98 (not to be confused with ø, ∅, or ⌀ ...Ah, Unicode).

Any thoughts on how to handle NULLs, anyone?

Could you guys make it more clear that more libraries are needed for the Buttons extensions?

$
0
0

I spent two hours trying to get buttons to work and it turns out the reason is that I needed the buttons.html5.min.js library.
There were no console errors and nothing in the docs indicated I needed this library.
Could you guys make it clear that other files are needed besides the buttons extension?
A single line in the docs could save people a lot of time and trouble.


how to render an array in a column

$
0
0

I have a checkbox field

{
                label: "Contact Name: *",
                name: "apd_history.agency_contact",
                type: "checkbox",
            },

{ data: "apd_history.agency_contact", render: "[, ]agency_contact" },

the field works,and the data (i.e. multiple values separate by commas are inserted into the db) but I can't figure out how to get the contents of that column to render on the table. I don't need/want to edit it. I just want to display the cont

Enabling both scrolly and paging at the same time?

$
0
0

The documentation states that "paging and scrolling can both be enabled at the same time if desired". Since there doesn't seem to be any examples of this in the documentation I am hoping some could shed some light on how to implement this?

Buttons ColVis - columns selector is not working with columns defined via JS-Object

$
0
0

Hello everybody,
today I tried to change from the old ColVis extension to Buttons. I came across with two problems. Perhaps these are Bugs, but maybe I'm doing something wrong.

First I found a problem with newer jQuery versions. The function call .andSelf() used in the dataTables.buttons.js script throws an error while trying to close the ColVis popup (jquery > 3.0.0).
To solve the problem you just have to replace the call with .addBack().

https://jsfiddle.net/friek2k/uy37fv6o/

Second I tried to use the columns property of the ColVis button with a CSS selector to show just a few columns at the list (to show/hide).
This worked perfectly when the columns are defined via HTML.
https://jsfiddle.net/friek2k/fjwjfuxL/

But when I define the same columns with exactly the same CSS classes as JS object, the CSS selector does not work.
https://jsfiddle.net/friek2k/4f98b6sv/

Thanks for the support!

How to add checkboxes to items in The Buttons: Colvis drop down menu?

$
0
0

Previously, I used Colvis plugin to manage column visibility.
Now I tried to use The Buttons extension: Colvis, but there is no checkboxes in this version of plugin.

How to add checkboxes to items in The Buttons: Colvis drop down menu?

$('#targettable').dataTables.destroy() does not work where as fnDestory works well.

$
0
0

Hi Support,

//this does not work
$('#targettable').dataTable().destroy();
$('#targettable').empty();

//if changed to fnDestory then this works,

$('#targettable').dataTable().fnDestroy();
$('#targettable').empty();

Please look this issue and help me to resolve this.

Regards.
Sunil

How to link a test case to a question ?

$
0
0

How do I link a test case to my question ??

Can we use button extension for excel export in IE9

$
0
0

API says Button extension supports IE10+. Is there an option to export xls in IE9 without flash.


Multiple Datatables visible, only refresh one

$
0
0

Hi,

I have 2 divs next to each other (example mainbox and infobox).
The mainbox has a large datatable.
The infobox has bootstrap tabs in them each with its own datatable.

I need to adjust the active datatable in the infobox when the tabs are changed, but
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
adjusts the table in the mainbox aswell.

I tries this aswell
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
This gave me an error, but I believe this will give me the same results as the first one, because the table in the mainbox is also visible

So in short, I only need to adjust the table in the active tab in the infobox.

Thanx

Multiple data entries

$
0
0

When I use the "create new entry" for data input, I would like to open a new input form as soon as I submit the latter. This would allow for a more rapid input of data when I have multiple data entries.
Are there any examples that already show this?

Datatable icon for modal view are not loaded once i inspect the element or refresh the Page

Basic init causes dataTables_length & dataTables_filter to be in row & col-sm-6

$
0
0

I have a very basic and a advanced datatable running. In the basic one dataTables_length & dataTables_filter are each embedded in col-sm-6 what I don't want. What causes this effect and how to get rid of?

<div id="table01_wrapper class="dataTables_wrapper form-inline dt-bootstrap no-footer">
    <div class="row">
        <div class="col-sm-6">
            <div id="table01_length" class="dataTables_length"></div>
        </div>
        <div class="col-sm-6">
            <div id="table01_filter" class="dataTables_filter"></div>
        </div>
    </div>
</div>

With basic init:

$('#table01').dataTable();

But what I want is the setup like in the advance table this:

<div id="table02_wrapper class="dataTables_wrapper form-inline dt-bootstrap no-footer">
    <div id="table02_length" class="dataTables_length"></div>
    <div id="table02_filter" class="dataTables_filter"></div>
</div>

With advanced init:

$('#table01').dataTable({
    dom: "Blfrtip",
    buttons: [{...}]
    ajax: {...},
    columns: [{...}]
    serverSide: true,
    processing: true,
    ...
});

Many thanks

DataTable export issues with hidden span value

$
0
0

I am doing export functions using DataTable for a report. I have created the example here: https://jsfiddle.net/hn2gcken/140/ I have user input value in W2, which also updates the value of 4Tax. I have created a hidden span tag to get those values when I insert. But the values are still not showing in the excel/PDF format.
I would be very grateful if anyone could help me. Thanks!

Viewing all 81403 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>