I am using datatables version 1.10. I have a requirement where

1. when clicked on sort icons (up and down arrows) sorting should work server side
2. when clicked on th , sorting should work locally.This is because user clicks on thead by mistake and servers gets unwanted burden.

Objective: I wanted to keep both

1. local sorting [clicking thead not icons](only for data currently in table display/page)
2. server side sorting [only by clicking icons].

THE PROBLEM: DataTables uses css background-image for sorting. This makes it difficult to detect click on icons since css background-image can not be captured on clicks as per my knowledge.

This is what i have e up with but still no progress

JSFIDDLE: /

JS:

$(document).ready(function () {
    ///
    var url = "";
    //
    $('th').on("click.DT", function (event) {       
        event.stopImmediatePropagation();
    });

    var table = $('#example').DataTable({
        "processing": true,
            "serverSide": false,
            "ajax": url
    });
    //
    //$('th').off('click.DT');
    // sort internally
    table.column('2').order('asc');
});

UPDATE-1:

JSFIDDLE: /

I was able to go one step ahead by adding a sortMask and then bind a click on it. sortMask is a div which id added to each column <thead> -> <tr> -> <th>

CSS:

.sortMask {
    width:19px;
    height:19px;
    float:right;
    display:inline-block;
    z-index:0;
    margin-right: -19px;
    /*background:red;*/
}

JS:

    $('th').on("click.DT", function (e) {
        //stop Propagation if clciked outsidemask
        //becasue we want to sort locally here
        if (!$(e.target).hasClass('sortMask')) {
            e.stopImmediatePropagation();
        }
    });

I am using datatables version 1.10. I have a requirement where

1. when clicked on sort icons (up and down arrows) sorting should work server side
2. when clicked on th , sorting should work locally.This is because user clicks on thead by mistake and servers gets unwanted burden.

Objective: I wanted to keep both

1. local sorting [clicking thead not icons](only for data currently in table display/page)
2. server side sorting [only by clicking icons].

THE PROBLEM: DataTables uses css background-image for sorting. This makes it difficult to detect click on icons since css background-image can not be captured on clicks as per my knowledge.

This is what i have e up with but still no progress

JSFIDDLE: http://jsfiddle/bababalcksheep/mae29pau/10/

JS:

$(document).ready(function () {
    //http://www.datatables/reference/api/
    var url = "http://www.json-generator./api/json/get/cbEfqLwFaq?indent=2";
    //
    $('th').on("click.DT", function (event) {       
        event.stopImmediatePropagation();
    });

    var table = $('#example').DataTable({
        "processing": true,
            "serverSide": false,
            "ajax": url
    });
    //
    //$('th').off('click.DT');
    // sort internally
    table.column('2').order('asc');
});

UPDATE-1:

JSFIDDLE: http://jsfiddle/bababalcksheep/mae29pau/14/

I was able to go one step ahead by adding a sortMask and then bind a click on it. sortMask is a div which id added to each column <thead> -> <tr> -> <th>

CSS:

.sortMask {
    width:19px;
    height:19px;
    float:right;
    display:inline-block;
    z-index:0;
    margin-right: -19px;
    /*background:red;*/
}

JS:

    $('th').on("click.DT", function (e) {
        //stop Propagation if clciked outsidemask
        //becasue we want to sort locally here
        if (!$(e.target).hasClass('sortMask')) {
            e.stopImmediatePropagation();
        }
    });

• javascript
• jquery
• sorting
• datatables

• BTW try to make the client make those kind of things, because if you have several users clicking on sort the server will have an unnecessary load. – Alberto Bonsanto Commented Dec 5, 2014 at 14:46
• can you insert icon in <th> like <th> <i class="sendToServer fa fa-lock pull-right"></i> </th> and then on click of icon ,send it to server and then $('.sendToServer').on('click',function(e){ // server side coding ; e.stopPropogation(); }) and anywhere on thead except icon if he clicks it will get sorted normally – Alok Commented Dec 5, 2014 at 14:46
• clicking on a table heading to sort is normal expected user behavior and the most mon user interface. Doesn't make sense that they do it by accident – charlietfl Commented Dec 5, 2014 at 14:48
• consider I want both options, there is a server side sorting by clicking icons only, and local sorting (is done by click thead (not Icons)).Local sorting is done only for records that are currently in display. That is my objective to keep them both separate. – django Commented Dec 5, 2014 at 17:44

1 Answer 1

I think the better solution here is to wrap the text not the icon:

<th><div>First name <div>abc</div></div></th>

And:

$('th').on("click", function (event) {
    if($(event.target).is("div"))
        event.stopImmediatePropagation();
});

Please note: you should use normal click even instead of click.DT because in this case it will be fired before DataTables one.

http://jsfiddle/mae29pau/38/