Problem with individual column sorting.

Problem with individual column sorting.

jasch2244jasch2244 Posts: 15Questions: 0Answers: 0
edited May 2009 in General
I currently have the code working fine with search filters for all and individual columns:
[code)var oTable;
var asInitVals = new Array();

$(document).ready(function() {
oTable = $('#example').dataTable( {
"sPaginationType": "two_button",
"bPaginate": true,
"bStateSave": true,
"bProcessing": true,
"bLengthChange": true,
"iDisplayLength": 15,
"bSort": true,
"oLanguage": {
"sSearch": "Search all columns:"
}

} );

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );



/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );[/code]

My problem is when I want to have all the same functionality without a few colums not being able to be sorted (because they have e-mail gfx or other icons in the grid / table). When I change the above code to :
[code)oTable = $('#example').dataTable( {
"sPaginationType": "two_button",
"bPaginate": true,
"bStateSave": true,
"bProcessing": true,
"bLengthChange": true,
"iDisplayLength": 15,
"bSort": true,
"aoColumns": [
null,
null,
null,
null,
null,
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true }
] "oLanguage": {
"sSearch": "Search all columns:"
}[/code]

The search all filter goes away and the page does not function properly. What am I missing here I'm not the best with java script, but did the best I could do after reading the documentation.

Replies

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Hi jasch2244,

    It looks like you are settings quite a few parameters to their default value - this isn't really needed (bPaginate is true be default for example). Going further with this, the bSortable default is true, so if you want a column to be not sortable you need to set it to be false ( http://datatables.net/usage#bSortable ). The other thing is that you have a couple of syntax errors around "oLanguage"

    How about:

    [code]
    oTable = $('#example').dataTable( {
    "bStateSave": true,
    "bProcessing": true,
    "iDisplayLength": 15,
    "aoColumns": [
    { "bSortable": false },
    { "bSortable": false },
    { "bSortable": false },
    { "bSortable": false },
    { "bSortable": false },
    null,
    null,
    null
    ],
    "oLanguage": {
    "sSearch": "Search all columns:"
    }
    } );
    [/code]

    Allan
  • jasch2244jasch2244 Posts: 15Questions: 0Answers: 0
    Hum, that still does not work as I'm losing my search all input tag and the inputs in the tfooter don't work properly either. I have included my table layout so you can see the structure (disregard coldfusion markup it's just running a query) also, I'm thinking the code error might be in what you included in the example file- this will be below the table in my example below:

    TABLE:
    [code]



    Status
    Address
    First Name
    Last Name
    List Price
    Expires
    Delete
    Modify





    #Listings.Status#
    #Trim(Listings.StreetAddress)#
    #Listings.FirstName#
    #Listings.LastName#
    #replace(dollarFormat(Listings.ListPrice), ".00", "")#
    #DateFormat(Listings.ExpirationDate, "m/dd/yy")#













     
     



    [/code]

    OTHER CODE INCLUDED IN YOUR EXAMPLE FILE (Keep in mind I don't want all of the columns to sort so I'm wondering if there is no input in a column maybe it's throwing the code for an endless loop of some sort)
    [code]
    "oLanguage": {
    "sSearch": "Search all columns:"
    }
    } );

    $("tfoot input").keyup( function () {
    /* Filter on the column (the index) of this element */
    oTable.fnFilter( this.value, $("tfoot input").index(this) );
    } );



    /*
    * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
    * the footer
    */
    $("tfoot input").each( function (i) {
    asInitVals[i] = this.value;
    } );

    $("tfoot input").focus( function () {
    if ( this.className == "search_init" )
    {
    this.className = "";
    this.value = "";
    }
    } );

    $("tfoot input").blur( function (i) {
    if ( this.value == "" )
    {
    this.className = "search_init";
    this.value = asInitVals[$("tfoot input").index(this)];
    }
    } );
    } );


    [/code]
  • jasch2244jasch2244 Posts: 15Questions: 0Answers: 0
    Disregard I copied the code in the wrong place. It works great now. Awesome!
  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Excellent stuff - good to hear you got it sorted :-)

    Allan
This discussion has been closed.