Jquery Tablesorter Index Column Insert

jquery tablesorter index column insert

I'm not that great with php, but couldn't you just do this?

echo "<table id=\"tabel\" class=\"tablesorter\">
<thead>
<tr>
<th>#</th>";
.
.
.
//next code fetch cells content
echo "<tbody>";

$i=1;

while ($row=pg_fetch_row($result)){
    echo "<tr>";
    echo "<td> $i </td>";
    $i++;

    foreach($row as $_column){
    echo "<td> $_column </td>";
    }
    echo "</tr>";

}

If you want a that column to not sort and stay unchanged, you can use the following widget (demo) with header option to prevent sorting:

// target the number column using a zero-based index
var number_column = 0;

// add custom numbering widget
$.tablesorter.addWidget({
    id: "numbering",
    format: function(table) {
        var c = table.config;
        $("tr:visible", table.tBodies[0]).each(function(i) {
            $(this).find('td').eq(number_column).text(i + 1);
        });
    }
});

$("table").tablesorter({
    theme: 'blue',
    // prevent first column from being sortable
    headers: {
        0: { sorter: false }
    },
    // apply custom widget
    widgets: ['numbering']
});

JQuery Tablesorter Add Column with Filters

Update #2: As of tablesorter v2.17.0 a class name* or ID can be used to target a column within the filter_functions option:

// filter functions
widgetOptions: {
    filter_functions : {
        ".exact" : function(e, n, f, i) {
            return e === f;
        }
    }
}

* Note: the class name can not include a selector that uses any kind of indexing, e.g. "th:eq()", ":gt()", ":lt()", ":first", ":last", ":even" or ":odd", ":first-child", ":last-child", ":nth-child()", ":nth-last-child()", etc.

In the docs, it shows an alternative to using the filter_functions option:

Alternately, instead of setting the column filter function to true, give the column header a class name of "filter-select". See the demo.

So, just add a filter-select class name to the column instead.

Update: Since other filter functions are being used, you can define these functions outside of the initialization code (demo)

// Add these options to the select dropdown (date example) 
// Note that only the normalized (n) value will contain
// the date as a numerical value (.getTime())
var dateFxns = {

    // Add these options to the select dropdown (date example) 
    // Note that only the normalized (n) value will contain
    // the date as a numerical value (.getTime())
    "< 2004": function (e, n, f, i) {
        return n < Date.UTC(2004, 0, 1); // < Jan 1 2004
    },
    "2004-2006": function (e, n, f, i) {
        return n >= Date.UTC(2004, 0, 1) && // Jan 1 2004
        n < Date.UTC(2007, 0, 1); // Jan 1 2007
    },
    "2006-2008": function (e, n, f, i) {
        return n >= Date.UTC(2006, 0, 1) && // Jan 1 2006
        n < Date.UTC(2009, 0, 1); // Jam 1 2009
    },
    "2008-2010": function (e, n, f, i) {
        return n >= Date.UTC(2008, 0, 1) && // Jan 1 2006
        n < Date.UTC(2011, 0, 1); // Jam 1 2009
    },
    "> 2010": function (e, n, f, i) {
        return n >= Date.UTC(2010, 0, 1); // Jan 1 2010
    }
},
currentDateColumn = 3,
filterFxn = {};
filterFxn[currentDateColumn] = dateFxns;

$('table').tablesorter({
    widgets: ['zebra', 'filter'],
    widgetOptions: {
        filter_functions: filterFxn
    }
});

Adding columns dynamically to a table managed with jQuery's tablesorter

   <head>

    <title>jQuery plugin: Tablesorter 2.0</title>

    <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />

    <link rel="stylesheet" href="../themes/blue/style.css" type="text/css" media="print, projection, screen" />

    <script type="text/javascript" src="../jquery-latest.js"></script>

    <script type="text/javascript" src="../jquery.tablesorter.js"></script>

    <script type="text/javascript">

    $(function() {      

$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);

    }); 
    function append(){
        var table = $("#myTable");
        $(table).remove();
        var tr = $("<tr></tr>");
        $("<td></td>").html('Test').appendTo(tr);
        $("<td></td>").html('test').appendTo(tr);
        $("<td></td>").html('test@gmail.com').appendTo(tr);
        $("<td></td>").html('$5.00').appendTo(tr);
        $("<td></td>").html('http://www.test.com').appendTo(tr);
        $(tr).appendTo(table);
        $(table).appendTo($('#tableholer'));
        $("#tableholer table").tablesorter();
    }

    </script>

</head>
<body>
    <div id="tableholer">
    <table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Due</th>
        <th>Web Site</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>jsmith@gmail.com</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>fbach@yahoo.com</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>jdoe@hotmail.com</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>tconway@earthlink.net</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>
    </div>
    <input type="button" onclick="append()" value="append"/>
</body>

In case of append this would work. in case of delete try same though i am never sure

Using jQuery Tablesorter filter-formatter widgets on column using a variable as column index

Sadly the filter_formatter function doesn't work that way. For now, you'll have to set up the filter_formatter before table initialization. I do plan to allow referencing a column by class or id (see issue #237), but I haven't worked out the code yet.

var filterFormatter = {};
$('table thead .date').each(function(){
    var column = $(this).index(); // assuming no colspans in the row
    filterFormatter[column] = function ($cell, indx){ 
        return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
            textFrom: 'from',   // "from" label text
            textTo: 'to',       // "to" label text
            dateFormat: 'dd/mm/yy' ,
            changeMonth: true,
            changeYear : true
        });
    }
});
$('table').tablesorter({
    widgets: ["zebra", "filter", "uitheme"],
    widgetOptions : {
        filter_columnFilters : true,
        filter_startsWith : true,
        filter_searchDelay : 300,
        filter_reset : '.reset',
        filter_formatter : filterFormatter
    }
});

How to add text string to Date column and adjust sort order in Tablesorter

It's actually just a simple modification. Change the parser to this:

var today = new Date().getTime();

$.tablesorter.addParser({
    id: 'monthYear',
    is: function(s) {
        return false;
    },
    format: function(s) {
        // remove extra spacing
        s = $.trim(s.replace(/\s+/g, ' '));
        // process date
        var date = s.match(/^(\w{3})[ ](\d{4})$/),
            m = date ? date[1] + ' 1 ' || '' : '',
            y = date && date[2] ? date[2] || '' : '';
        return /active/i.test(s) ? today : new Date(m + y).getTime() || '';
    },
    type: 'Numeric'
});

The word "active" in the table cell will be case insensitive. And here is a demo of it working. Note that dates in the future, Jul 2012 in this case, will sort above "active".

Jquery Tablesorter sort same column after update

jQuery's .data() will help you here. Whenever the user clicks to sort a table, store the columns on the table itself. Within the sort function, add this:

$("#table").data('sorting', selectedColumn);

Now the element with id="table" has a property sorting with the value of selectedColumn. In tableUpdated, you can use this data:

function tableUpdated() {
    $(".tablesorter").trigger("update");
    var sorting = [[$("#table").data('sorting'), 0]];
    $("#table").trigger("sorton", [sorting]);
}

Data added using .data() can be even more complex, allowing you to add objects of data. See this page for more details.

Jquery Tablesorter Index Column Insert