//create the sortable headers
                for (var i = 0; i < colsSorted.length; i++) {
                    var column = colsSorted[i];
                    var props = _data.cols[column];
                    $(document).on('click', '.'+column+'ascen', function(){
                    col=$(this).parents("th").find("a").html();
                if (priv.options.debug) console.log('col:{0} clicked'.f(col));

            //set the new sorting column
            if ($(this).attr("class") == "ascen"){ _currSortFlip = true;}else{
            _currSortFlip =false;
            }
            _currSortCol = col;

            if (typeof priv.options.columnClicked == 'function') {
                priv.options.columnClicked.call(e.target, {
                    event: e,
                    column: _data.cols[_currSortCol],
                    descending: _currSortFlip
                });
            }

                     _headSort = undefined;
            _body = undefined;
            publ.sort("asending");
            priv.createTable();
                        });
                        $(document).on('click', '.'+column+'descn', function(){

        col=$(this).parents("th").find("a").html();

            if (priv.options.debug) console.log('col:{0} clicked'.f(col));

            //set the new sorting column
            if ($(this).attr("class") == "ascen"){ _currSortFlip = true;}else{

            _currSortFlip =false;
            }
            _currSortCol = col;

            if (typeof priv.options.columnClicked == 'function') {
                priv.options.columnClicked.call(e.target, {
                    event: e,
                    column: _data.cols[_currSortCol],
                    descending: _currSortFlip
                });
            }

                     _headSort = undefined;
            _body = undefined;
            publ.sort("desending");
            priv.createTable();
                        });
                    if (!props.hidden) {
                    //console.log(props.align);
                    if(props.friendly=='Image')props.friendly='&nbsp;';

                        if(typeof(props.align)=='undefined')props.align='left';
                    dataindiv[props.friendly.replace(" ", "")]=[];
                    if(typeof(props.Width)=='undefined')props.Width=50;     
                      $.each(_data.rows, function (index, row) {                
                  if ($.inArray(_data.rows[index][props.friendly.replace(" ", "")],dataindiv[props.friendly.replace(" ", "")])==-1){

                   dataindiv[props.friendly.replace(" ", "")].push(_data.rows[index][props.friendly.replace(" ", "")]);
                  } 
                      });


                     var getheader=priv.createheader(dataindiv[props.friendly.replace(" ", "")].sort(),column);

                        var headCell = $('<th width="'+props.Width+'px"  style="position:relative;"></th>').appendTo(_headSort);
                        var link = $('<a class="pull-left" href="#">{0}</a>'.f(props.friendly || column));
                        link.on('click', {column: column}, priv.columnClicked).appendTo(headCell);

                        if(props.friendly.replace(" ", "")=="ServiceCategory"){
                        property="right";
                        }else{
                        property="right";
                        }
$('<div class="newelm" style="max-width:200px;overflow-x: scroll; overflow-y: visible;width:185px;height:auto;max-height:250px;position:absolute;margin-top:25px;background-color:white;display:none;'+property+':-1px;z-index:999;"></div>').append(getheader).appendTo(headCell);
$('<div class="filtersearch" style="visibility:hidden;height:23px;width:11px;"></div>').appendTo(headCell);


                        if (props.tooltip) {
                            $('<i class="icon-info-sign"></i>').tooltip({
                                title: props.tooltip.trim(),
                                html: true,
                                container: 'body',
                                placement: "top",
                                delay: {
                                    show: 500,
                                    hide: 100
                                }
                            }).appendTo(link);
                        }

                        //Add sort arrow
                        if (column == _currSortCol) {
                            if (_currSortFlip) $('<i class="icon-chevron-down pull-right"></i>').appendTo(headCell);
                            else $('<i class="icon-chevron-up pull-right"></i>').appendTo(headCell);
                        }
                    }
                }
            }

Is there a question that goes along with this code?

Hericles, Now I guess users thinks that moderators are OMNISCIENT

I am trying to add a sharepoint kind of sorting for the header in WATABLE jquery script. When I use the above code watable sorting is not working

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.