Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery dataTable reset sorting

I am trying to do a task, just as same as this question.

  • I have a working jquery dataTable
  • I want a function to reset the sorting, which is before user select any column, same as read in from the HTML.

It lead me to a nice plugin.

http://datatables.net/plug-ins/api/fnSortNeutral

jQuery.fn.dataTableExt.oApi.fnSortNeutral = function ( oSettings )
{
    /* Remove any current sorting */
    oSettings.aaSorting = [];

    /* Sort display arrays so we get them in numerical order */
    oSettings.aiDisplay.sort( function (x,y) {
        return x-y;
    } );
    oSettings.aiDisplayMaster.sort( function (x,y) {
        return x-y;
    } );

    /* Redraw */
    oSettings.oApi._fnReDraw( oSettings );
};

However I dont know "How to make it work". Anyone know what is "oApi", or do I need some more setup before I use this plugin ?

Because my script shows up Uncaught TypeError: Cannot read property 'oApi' of undefined , right after I copy the script, and the error makes the function undefined. What should I do ?

like image 589
Theo Ymca Avatar asked Nov 19 '14 04:11

Theo Ymca


People also ask

How to create a table sortable using jQuery?

1. Import jQuery JavaScript library together with the JavaScript table-sortable.js and Stylesheet table-sortable.css into the document. 2. Create a search filed that can be used to filter your table. <input type="text" placeholder="Search in table..." id= "searchField"> 3. Define your own tabular data and column names as follows. 4.

How do I reset the Order of columns in a column?

This can be done by calling the colReorder.reset () method. This example shows that method being triggered from a button click. To demonstrate, reorder the columns and then click the reset button to have the columns reset.

How to create a DataTable from HTML table in Salesforce?

Here the following code helps us to create a datatable from html table . var kv_datatable_example = $ ('#kvcodes_table_id').DataTable ( //Here my custom code... ); Now , you can add the following code to a button, there before create a rest button and get its click action. That’s it. It will take care the reset operation.

How to render a data table on the page?

Initialize the plugin to render a data table on the page. 5. Enables a dropdown to select the number of table rows to show per page. 6. Update data with Ajax. // or Set new data on table, columns is optional. 7. Enable/disable sorting on all columns or specific column. ... ... ... ... 8. Render different table based on viewport width.


2 Answers

For DataTable 1.10+ can be used order.neutral() plugin

PLUGIN CODE

$.fn.dataTable.Api.register( 'order.neutral()', function () {
    return this.iterator( 'table', function ( s ) {
        s.aaSorting.length = 0;
        s.aiDisplay.sort( function (a,b) {
            return a-b;
        } );
        s.aiDisplayMaster.sort( function (a,b) {
            return a-b;
        } );
    } );
} );

CDN: cdn.datatables.net/plug-ins/1.10.19/api/order.neutral().js

EXAMPLE

// Return table to the loaded data order
  table.order.neutral().draw();
like image 109
Mattia Consiglio Avatar answered Sep 25 '22 02:09

Mattia Consiglio


There's a usage example in the link you provided.

var table = $('#example').dataTable();

// Sort in the order that was originally in the HTML
table.fnSortNeutral();

EDIT Try giving it an "order" property when initializing: JSBin

jQuery.fn.dataTableExt.oApi.fnSortNeutral = function ( oSettings )
{
    /* Remove any current sorting */
    oSettings.aaSorting = [];

    /* Sort display arrays so we get them in numerical order */
    oSettings.aiDisplay.sort( function (x,y) {
        return x-y;
    } );
    oSettings.aiDisplayMaster.sort( function (x,y) {
        return x-y;
    } );

    /* Redraw */
    oSettings.oApi._fnReDraw( oSettings );
};

$(document).ready(function() {
    var oTable = $('#example').dataTable({
        "order" : [[ 1, "desc" ]]
    });

    setTimeout(function() {
        oTable.fnSortNeutral()
    }, 1000)

});
like image 44
elzi Avatar answered Sep 24 '22 02:09

elzi