How to make draggable column in HTML5 with 5 seconds refresh rate? - html

Question

I am making a website which is loading data from ajax webservice call and populating it in html tables and this data gets refreshed in every 5 seconds. I have achieved this using lazy loading in Backbone JS. So when javascript timer fires in every 5 seconds it makes ajax call and it reloads the template which contains the table thus showing new data.
this.metrices.fetch({
url : (isLocal) ? ('js/jsons/agent.json') : (prev_this.url + '/agentstat'),
data: JSON.stringify(param),
type: "POST",
dataType: "JSON",
contentType: "application/json",
})
.done(function() {
});
this.$("#agentMetrics").html(this.agentTemplate({
agents: this.metrices.toJSON()
}));
And the #agentMetrics template is like this
<table class="table_class js-table-deskop" id="agent" style = "width:100%">
<tr class="">
<th class="js-table-agent js-agentPref-0 js-agentPref-0">Names</th>
<th class="js-table-agent js-agentPref-1">State</th>
<th class="js-table-agent js-agentPref-2">Skill</th>
<th class="js-table-agent js-agentPref-8">Center</th>
<th class="js-table-agent js-agentPref-9">Lan Id</th>
<th class="js-table-agent js-agentPref-10">Login Id</th>
<th class="js-table-agent js-agentPref-11">Manager</th>
<th class="js-table-agent js-agentPref-12">Site</th>
<th class="js-table-agent js-agentPref-13">Team Leader</th>
<th class="js-table-agent js-agentPref-14">Workgroup</th>
</tr>
{{#each agents}}
<tr >
<td class="th1 js-agentPref-0">{{name}}</td>
<td class="js-alert js-agentPref-1 js-state-agent" >{{state}}</td>
<td class="js-alert js-agentPref-2 js-skill-agent">{{dispSkill}}</td>
<td class="js-alert js-agentPref-8">{{center}}</td>
<td class="js-alert js-agentPref-9 js-lanid-agent">{{lanId}}</td>
<td class="js-alert js-agentPref-10">{{loginId}}</td>
<td class="js-alert js-agentPref-11">{{manager}}</td>
<td class="js-alert js-agentPref-12">{{site}}</td>
<td class="js-alert js-agentPref-13">{{teamLead}}</td>
<td class="js-alert js-agentPref-14">{{workGroup}}</td>
</tr>
{{/each}}
</table>
Now the problem is that I have a new requirement where I have to make these columns resizable and swappable i.e their width could be changed by dragging and can columns can be swapped like it can be done in Adobe flex.
This is where it gets tricky as what ever I used since the template gets refreshed in 5 seconds so it is not able to hold this selection is there any plugin to achieve this which supports retention of this preference dragging or swapping. Or can I some how prevent loading of template, any suggession

Answer 1

Use a data binding library like rivets.js.
Once you bind your view with rivets, changes in the model/collection will be updated in DOM by rivets without replacing the entire DOM.
If new records are added, new DOM element will be inserted in the respective position without altering the existing ones.
Below is a small demo taken from another answer of mine:
rivets.adapters[':'] = {
observe: function(obj, keypath, callback) {
obj.on('change:' + keypath, callback)
},
unobserve: function(obj, keypath, callback) {
obj.off('change:' + keypath, callback)
},
get: function(obj, keypath) {
return obj.get(keypath)
},
set: function(obj, keypath, value) {
obj.set(keypath, value)
}
}
var data = [{
name: "john",
age: 10
}, {
name: "joseph",
age: 11
}, {
name: "joy",
age: 12
}]
var userCollection = new Backbone.Collection(data);
var View = Backbone.View.extend({
initialize: function(options) {
this.render()
},
render: function() {
rivets.bind(this.el, {
users: this.collection
});
}
});
var userView = new View({
el: '#user-list',
collection: userCollection
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<ul id='user-list'>
<li rv-each-user="users.models">
<input type="text" rv-value="user:age"/>
<span>{user:name}</span><span> {user:age}</span>
</li>
</ul>