CODEWITHSUNDEEP
javascriptjqueryhtmltablesorter
jintus95
jintus95

Reputation: 53

jQuery tablesorter refusing to working after many attempts

my jquery tablesorter plugin has just refused to work no matter what I do. I have tried downgrading my version of jquery amongst other things but still nothing.

I'm building the table from my js file with data from an external json file.

Here's what my HTML looks like.

<div class="table-responsive">
            <table id="myTable" class="tablesorter">
                <thead>
                    <tr>
                        <th>A</th>
                        <th>B</th>
                        <th>DATE & TIME</th>
                        <th>C</th>
                        <th>D</th>
                        <th><button>View </button></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

Here are my imported scripts

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/selectivizr/1.0.3b/selectivizr.min.js"></script>
<script type="text/javascript" src="Vendors/js/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="Vendors/js/jquery.tablesorter.min.js"></script> 
<script src="Resources/js/main.js"></script>

And my js where I build the table and call tablesorter

var tr;
    for (var i = 0; i < json.length - 30; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].name + "</td>");
        tr.append("<td>" + json[i].summary + "</td>");
        tr.append("<td>" + formatDate(json[i].time) + "</td>");
        tr.append("<td " + "class= text-center>" + json[i].size + "</td>");
        tr.append("<td " + "class= text-center>" + json[i].id + ', ' + json[i].id + "</td>");
        $('tbody').append(tr);
    }

I don't believe the fact that I'm building the table from jQuery is why I'm having this problem. I even tried creating a new table with html only but that didn't work.

This is how I call the tablesorter with jquery

$("#myTable").tablesorter({
        sortList: [[2,0], [3,1]]
    });

Any help would be greatly appreciated.

THANK YOU

Upvotes: 0

Views: 253

Answers (1)

Phani Kumar M
Phani Kumar M

Reputation: 4590

Simple demonstration of jQuery tablesorter using your code. I don't see any problems.

$(function () {
	var tr;
	for (var i = 0; i < 10; i++) {
		tr = $('<tr/>');
		tr.append("<td>" + i + "</td>");
		tr.append("<td>" + i + "</td>");
		tr.append("<td>" + i + "</td>");
		tr.append("<td " + "class= text-center>" + i + "</td>");
		tr.append("<td " + "class= text-center>" + i + ', ' + i + "</td>");
		$('tbody').append(tr);
	}

	$("#myTable").tablesorter({ widgets: ['zebra'] });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.15/js/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.15/css/theme.blue.css" />


<div class="table-responsive">
	<table id="myTable" cellspacing="1" class="tablesorter-blue">
		<thead>
			<tr>
				<th>A</th>
				<th>B</th>
				<th>DATE & TIME</th>
				<th>C</th>
				<th>D</th>
				<th><button>View </button></th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

Upvotes: 1

Related Questions