How to implement live DOM sorting?

How to implement live DOM sorting?

Ant248Ant248 Posts: 15Questions: 3Answers: 0

Hi there,

Just started using datatables am loving it!

How ever i'm a bit confused how to implement the live DOM sorting from this example:
http://datatables.net/examples/plug-ins/dom_sort.html

I have my fields added as so:

function addRow() {
id ++;
var place = id + 1;    

$('#maintable').dataTable().fnAddData( [
    ''+place+'',
    '<input type="text" class="datepicker" id="ddate'+id+'" name="ddate[]" size="8"/>',
    '<select name="counter[]" id="count'+id+'"></select>',
    '<select name="assol[]" id="assol'+id+'"><option value="liab">Buy</option><option value="asset">Sell</option></select>',
    '<select name="undt[]" id="undt'+id+'"><option value="u3o8">U3O8</option><option value="inf">Inflation</option></select>',
    '<select name="prodt[]" id="prodt'+id+'"><option value="out">Outright</option><option value="call">Ceiling (Call)</option><option value="put">Floor (Put)</option></select>',
    '<select name="pricst[]" id="pricst'+id+'"><option value="float">Floating</option><option value="fix">Fixed</option><</select>',
    '<input onkeyup="begin();" type="text" name="fp[]" id="fp'+id+'" size="6" />',
    '<input onkeyup="begin();" type="text" name="discp[]" id="discp'+id+'" size="6" />',
    '<input onkeyup="begin();" type="text" name="sizeinf[]" id="sizeinf'+id+'" size="6" />',
    '<input onkeyup="begin();" type="text" name="strike[]" id="strike'+id+'" size="6" />',
    '<input type="text" class="datepicker" name="besd[]" id="besd'+id+'" size="8" />',
    '<span id="um'+id+'">',
    '<span id="av'+id+'">',
    '<span id="tl'+id+'">',
    '<span id="pnl'+id+'">',
    '<span id="suo'+id+'"></span>',
    '<span id="sr'+id+'"></span>',
    '<span id="si'+id+'"></span>',
    '<span id="sv'+id+'"></span>',
     ] );
     
$( ".datepicker" ).datepicker( "destroy" );
$( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
   
cparty();               
}

I've tried to use:

$.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).val();
    } );
}

This has no effect thou.
I'm quite new to java scripts, but i can see its searching for inputs but none of my input columns will sort.

Probably doing something wrong here can any one point me in the right direction?

Thanks

Answers

  • Ant248Ant248 Posts: 15Questions: 3Answers: 0

    ok found the problem still had:

    $(document).ready(function() {
      oTable = $('#maintable').dataTable();
    

    i have replaced with:

    $(document).ready(function() {
        $('#maintable').DataTable( {
            "columnDefs": [
                { "targets": 1, "orderDataType": "dom-text-numeric", "sType": "sdate"},
                { "targets": 2, "orderDataType": "dom-select" },
                { "targets": 3, "orderDataType": "dom-select" },
                { "targets": 4, "orderDataType": "dom-select" },
                { "targets": 5, "orderDataType": "dom-select" },
                { "targets": 6, "orderDataType": "dom-select" },
                { "targets": 7, "orderDataType": "dom-text-numeric" },
                { "targets": 8, "orderDataType": "dom-text-numeric" },
                { "targets": 9, "orderDataType": "dom-text-numeric" },
                { "targets": 10, "orderDataType": "dom-text-numeric" },
                { "targets": 11, "orderDataType": "dom-text-numeric" },
                { "targets": 12, "orderDataType": "dom-text-numeric" },
                { "targets": 13, "orderDataType": "dom-text-numeric" },
                { "targets": 14, "orderDataType": "dom-text-numeric" },
                { "targets": 15, "orderDataType": "dom-text-numeric" }
            ]
        } );
    });
    

    works great

This discussion has been closed.