drvic10k / bootstrap-sortable Goto Github PK

Suggestion: I have a table and the last row is the Total row. When I sort the Total row is sorted too. The ideal behavior is to keep the Total row freezed.

Today is it possible to have this?

There is a known issue on Firefox related to position:relative + position:absolute + tables. It does not run as well as Chrome, Safari or Opera browsers. The problem on Firefox (version 21.0) is the position of the arrow once you click in a sortable th:

You can see the arrow at the bottom right corner on the screenshot. Does anyone noticed this behavior before?

Any tip would be appreciated. Thanks in advance.

I've imported the JS and and CSS files and added the class to my table, it adds the highlight-able columns but clicking them does nothing?

I have a "main" table with sort options, and I have a "sub" table inside of each row of the main table without the sort options. If I sort one of the columns of the main table, the sub table columns get sorted too, even if I did not put the sortable class on the sub table.

Following the link in the readme gives the demo. It doesn't do any sorting though.

Ascending (going up) sort option should be indicated by an arrow pointing up and descending by an arrow pointing down.

http://ux.stackexchange.com/questions/37564/use-up-or-down-arrow-to-represent-sort-ascending-at-table-header

Hey drvic10K,

Ty for this plugin, but i didn't understand exactly how to use it.
Could you improve a bit more your readme for beginners ?

Below what i did :

1- i added your css and js files
2- i added "sortable" class to my table
3- i added
$(document).ready(function() {

$.bootstrapSortable();

});

4- but still not working, i didn't get any changes.
Could you explain me more what i did wrong please ?
Ty

I created a table in which first column is of check boxes . Now i want to this column with check boxes which are checked . I also updating data-value from 0 to 1 when some one check check box , but this is not working

Could you please remove your version of moment-js from the library's sourcecode? One could easily add moment-js by themselves.

I had to remove the integrated moment-js from the sourcecode file because it conflicted with my moment-js added version.

I tried to put two tables on one page, each with it's own default sort and data-firstsort and I had some issues with asc/desc.

The issue is that the tables shared the same bsSort[].

So the second table's default sort [say 2-0 desc] would cause the first table's 2-0 to start 'asc' on first click regardless of the data-firstsort. Since the default sort does a doSort{}, it reversed the direction of 2-0, which the 1st table picked up on.

I put in a solution if you're interested? It basically assigns a bsSort[] to each table specifically.

Here's an example of the issue: (column one of first table not default sort desc as it should)
http://jsfiddle.net/andyphillips82/gjf4nnsg/

And the solution (using a class name to set the sort context of each table).
http://jsfiddle.net/andyphillips82/bamsmxbt/3/

It'd be nice if this used was compatibile with some kind of package management (bower?)

I want to use it in my rails project, but I'm concerned at the lack of commit tags, due to the volume/frequency of changes.

No real biggie, but it'd be nice to have.

In a table with a sortable column of empty values (<td></td>) sorting still happens after clicking on the column header, causing rows to reorder, which is somewhat confusing.
This happens only in Chrome (tested in Firefox, Chrome and Safari)

There's no tag for 1.9.0, even though the readme says the current version is such.

Hi,

I use this plugin on a website which needs to run under IE8 and I had to make a little correction into your code to make it work.

1. Integrate selectivizr plugin in order to handle css selectors
2. Replace line 72 with code "if (colspan)" by the code "if (colspan > 1)"

Regards.

Please add option to set sorting direction signs for each column separately. Then text columns can be 'az' and numerics '_19' etc.

I have a scenario where the sortable table also has a feature of "Show More" where when the "Show More" link is clicked 25 more records are shown (initially 25 records are shown on initial page load). When table headers are clicked to sort the table, the table should be sorted but also have the same amount of records being shown as on the previous sort (done last). The problem I have is the table records are being hidden before first being sorted. My workaround currently is to use a "settimeout" with the jQuery hide method inside of the function. I was hoping to avoid using this hack and instead being able to somehow manually be able to call the table sort and then have the jQuery hidden method called on the appropriate number of records. Is anyone aware of if this is possible and if so how? Thanks!

How I can apply the effects to a table dynamicaly loaded?

When adding sortable to a table with HTML in a table header the code is removed after sorting twice.

Example:
<th> <i class="fa fa-map-marker fa-fw"></i> Location </th>

After clicking on the header twice, the icon is no longer visible.

Hi, I've decided to use this plugin from all the existing others because it's small, useful and works "out-of-the-box".

But it has some problems:

1. If you have an static HTML (php page) with some sortable tables, and call the:

jQuery(function(){

...
$.bootstrapSortable(true, 'reversed');
...

on the JS part, all the tables get correctly sorted. Right?

Well, the via AJAX I add some new tables with sortable class, and I've to call again $.bootstrapSortable() to make it workable.
This doesn't work.
New attached table (response from ajax call) have no sort signs (and have default-sort on TH). This happens if I use $.bootstrapSortable(TRUE,...).
but if I use $.bootstrapSortable(False, ...) it works OK!

Problem with that?

I've a most dificult scenario:

• One page which have a sortable table static on request time, where every row of it as some action buttons which make an ajax call which brings and attach a table with response data. This table is sortable too. Problem here?

If I sort the static table (the one containing the buttons to ajax actions) and then I click a button and it adds a table on an other part of the same page, as I've called the $.bootstrapSortable with FALSE, it reorders the main table and this is not what I want.
So if I change it to TRUE, this particular case works right, but the same "attachement function after ajax post" that is generic on my framework (same ajax call for some type of forms on my framework) which call some php script and adds response to attach-selector node) has problems then on other cases, like for example the very first case explained.

It's hard to transmit the thing but the case is that it doesn't work properly and I guess that if instead of RESORT every sortable table every time you call $.bootstrapSortable, you could select which table you want to sort (for example, only added via AJAX tables), it would be enough.

Is it possible to specify which tables to sort instead of all the existing ones when you've added something on the fly?

Hello drvic10k!

I'm really loving your sortable, but I have an issue with sorting dates.
I have columns with a 'DD/MM/YY HH:mm' format, so I'm adding the following to their td tags:
data-dateformat='DD/MM/YY HH:mm'

So, sorting seems to work well except for different days in the same month. An example with the following dates:
28/05/13 11:30
29/05/13 11:30
30/05/13 11:30
01/06/13 11:30
01/07/13 11:30

The sorted result:
30/05/13 11:30
29/05/13 11:30
28/05/13 11:30
01/06/13 11:30
01/07/13 11:30

Am I doing something wrong? Thanks in advance!

PD: I forgot to say that i tried with a YYYY-MM-DD format and the problem is still there.

I'd like to use your library for backend-sorting (i.e. click on a header should invoke an AJAX call to backend. To do this, I would implement my own doSort method, the thing is to allow passing this custom method to your controller so it gets called instead of the default one.

Question: Is the sorting capability accessible for low and no vision users? Maybe with a screenreader?

Hi,
Quick question. What would I need to change (if at all possible) to get a DESC sort on the first click on a table header? The ASC sort isn't really relevant for me so I would prefer getting the DESC sort first.

Is this possible with a minor code modification?

Thanks

Can you bump the version so we can use the changes from #64 on our projects?

When adding a sub-table (on the client side, not existing during document ready event) in an existing sortable table cell, it inherits of the parent table class "sortable" CSS class and headers gets animated just if the sub-table was also sortable. So far, nothing to worry.

• If $.bootstrapSortable() is not invoked, no harm other misleading the end-user. Sort will not work on the sub-table.
• If $.bootstrapSortable() is invoked after the sub-table creation, a click on the sub-table header makes the parent table get sorted which is not really the intended effect.

I realize it is a corner case, but any way to tell the script to not apply sortable on sub table? Or even better: a way to get sub tables sortable.

@jdorfman please add this to maxcdn

Related to Issue 13.

Here is the output:

7/31/2013
7/31/2013
7/30/2013
8/23/2013
8/23/2013
8/1/2013
12/30/2013
12/30/2013
12/21/2013
12/21/2013
12/21/2013

As you can see, there are a number of errors with the sorting.

Here is what my HTML looks like:

<td data-dateformat="M-D-YYYY">
    @item.EndDate.ToShortDateString()
</td>

I'm using the current version on nuGet (1.4.0)

Sometimes, we only want specific columns to be sortable - would it be possible to add the capability to remove the sort-ability from selected columns somehow?

Thanks 😄

Example: http://htmlpreview.github.io/?https://github.com/quantum13/bootstrap-sortable/blob/2d6122c33da89c3e62cd4b5ca994a88a65ec3bd5/index.html

Add rows and try sort some of last cols.

Is it possible to have a class on TH elements that will give just a hint like

th.unsorted ( for neutral sorting, this is the default status, as it comes from HTML )
th.sorted.up ( for sorting based on the logic a..z, z..a, etc. )
th.sorted.down ( you know the meaning :) )

this would be superawesome so we can configure the sorting arrows with CSS directly, without the need to configure the javascript or use any data- attribute. Also, you don't need a SPAN to append the icon, but just use :after with CSS on the TH directly.

I can do the patch for you if you want, and then make a pull request. It's up to you the decision :)

Thanks in advice!

Hello, nice js script! It's very robust :) My problem is: I have some columns with blank data in some cells. Currently these sort before any other value(?) but I'd like them to always sort to the bottom instead. Could support for this be added?

When I load content over AJAX, i'd like to sort the new content in the same way I had sorted before.

Would it be possible to somehow either GET/SET the current sorting values or for bootstrap-sortable to remember them?

Looked into the code for a sec and shouldn't be impossible.

Thanks in advance!

Added the sortable class to my table and both the js files. but when i click on one of the theaders, only the the top and bottom item in the vertical row are in the right place but the middle items are in the wrong order. (in the screenshot is the "Externe Partij" header sorted)

I've added a very quick demo via a gh-pages branch but I'm unable to make a pull request because the repositories have a different commit history or something...

You can check the demo in action here.

I have a user table with one column that has a "delete user" button. It doesn't make sense to sort this column. Is there any way I can disable sorting for a single column? E.g. data-defaultsort="disable" ?

    $(function() {
        $.bootstrapSortable(true, 'reversed');
    }

I cannot seem to get the sign reversed. Does this code need to wait for initial sort?

I'm curious if there's a solution to this problem?

Can reproduce easily via latest download as of today.

Currently am using data-value and using integers.

<table class="sortable table">
  <thead>
    <tr>
      <th>foo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1%</td>
    </tr>
    <tr>
      <td>4%</td>
    </tr>
    <tr>
      <td>10%</td>
    </tr>
    <tr>
      <td>15%</td>
    </tr>
    <tr>
      <td>9%</td>
    </tr>
    <tr>
      <td>1%</td>
    </tr>
  </tbody>
</table>

Hi,
in my table, the last row is used to show the sum of values; I don't want these values to be sorted.
Is there a way to disable the entire line (tr)?

Thanks!

Guys, I am using bootstrap-sortable in my Rails 4 application which uses the Rails 4 Turbolinks (https://github.com/rails/turbolinks). The problem is that to the bootstrap-sortable work proper the page must be reloaded (browser refresh), what do not happen naturally when you are using turbolinks.

Turbolinks works by changing the page content and the page URL with Ajax, it's bind in every app url link.

Any tip?

Hey! I know there's already this closed issue #50 - but it doesn't apply here.

I have a table where a certain row will dynamically be added underneath a certain row. I don't want this row to be sorted though, so I'd like it to maintain it's position underneath that certain row regardless of any sorting. Hope that makes sense :)

Hey, maintainer(s) of drvic10k/bootstrap-sortable!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library drvic10k/bootstrap-sortable is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "drvic10k/bootstrap-sortable",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I have a lot of data in my tables and some javascript that handles hiding/showing the columns, if there are any hidden columns in the code, this sorting fails on any item after that.

I've read the following:

Cell with colspan and multiple header rows

When you have cell with colspan, by default, the first column of the span will be sorted. You can override this by using data-mainsort attribute for the column that you want to be sorted with the colspan cell.

However I don't get the following working:

<table class="table table-bordered sortable">
<thead>
    <tr class='active'>
        <TH class='text-center' colspan=2>Gift name</TH>
        <TH class='text-center'>Gift type</TH>
    </tr>
</thead>

<tbody>
    <td class='hidden-xs' width=1%>
        <a href="http://www.steamgifts.com/giveaway/mScH1/cubemen-2"><img src='http://cdn.akamai.steamstatic.com/steam/apps/295850/capsule_sm_120.jpg'></a>
    </td>
    <td data-mainsort><a href="http://www.steamgifts.com/giveaway/mScH1/cubemen-2">Cubemen 2</a></td>
    <td>Bundle game</td>
</tbody>
</table>

The sorting is just not working when I put a 'colspan' on the TH header.

Hello,

I've installed bootstrap-sortable version 1.11.2 to sort date located on the bootstrap-table. I'm using bootstrap table 1.6.0. My content is a json array loaded through ajax .

When i'm clicking to sort the table on the any row, I receive this error message :
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': 'td:nth-child(NaN)' is not a valid selector.

I've correctly added moment.js, the css and js of bootstrap-sortable.

Following is my html table :

And my javascript :

$(function () {
$('#table_invoice').bootstrapTable({
method: 'get',
url: '/booking/invoices_json/',
cache: false,
search: true,
striped: true,
pagination: true,
sortName : 'date',
sortOrder : 'desc',
pageSize: 5,
onClickRow: function (row) {
//if the user clicked on edit or remove, don't load the invoice form
if (action != true) {
window.location.href = '/mypage/otherpage/' + row.id +'/';
}
},
columns: [
{
field: 'id',
title: '{% trans "id"|capfirst %}',
visible: false,
sortable: true
},
{
field: 'date',
title: '{% trans "date"|capfirst %}',
sortable: true
},
{
field: 'status',
title: '{% trans "status"|capfirst %}',
sortable: true
},
{
field: 'total',
title: '{% trans "total"|capfirst %}',
sortable: true
},
]
});
});

Hi,
I have a table inside bootstrap model and the rows are populating by an ajax call which is fired on show event of model, here sorting is not working, always getting the error "Uncaught TypeError: Cannot read property 'replace' of undefined" on "v = v.replace(/^\s_/i, "").replace(/\s_$/i, "");" (minified script).

Please help to resolve it.

Hi,
I can not find a way to put the pagination toolbar and the search input.
It seems that data-pagination="true" data-search="true" do not work.

Any Idea?
Tnx,
Antony

Hello drvic10k,

I am using your code and it's works well.
However, one of my column is populated with this kind of datas :

1186 €
680 €
969.15 €
440 €
1300 €
442 €
436 €
417.09 €
1400 €

And sorting method is not right in this case.

Could you improve it with this use case ?

Thank you so much ;)