I have a table that I have created in bootstrap 3 using the grid and NOT tables.
The website is for booking busses.
The table HTML structure looks something like this:
<div class="row">
<div class="col-lg-3"><h3>Bus Company</h3></div>
<div class="col-lg-3"><h3>Bus Features</h3></div>
<div class="col-lg-3"><h3>Departure Time</h3></div>
<div class="col-lg-3"><h3>Book Now</h3></div>
</div>
And then there's a loop that gets all the relevant search results...one of the iterations looks like this:
<div class="row busses">
<div class="col-lg-3"><p>Bus Company One</p></div>
<div class="col-lg-3"><p>Water, Toilet</p></div>
<div class="col-lg-3"><p>6:45 pm</p></div>
<div class="col-lg-3"><p>Book Now</p></div>
</div>
And that will repeat for every bus that matches the search criteria.
I would like to be able to click on any of the titles in the first row and then that sorts the results accordingly...or maybe just departure time and bus company (column 1 and column 3).
I have searched far and wide and ideally would just like a javascript plugin that I can use but everything I find seems to need to use an actual html <table> and I do not want to use that.
If anyone does know of a plugin it also needs to be able to sort by time as in...see that 2pm is later than 11am if you get what I mean.
Thanks in advance!
Matt
This could be achieved with something like this:
function sortBusses(byDatum, reverse) {
var busses = $('.busses').detach().toArray();
busses = busses.sort(function(a,b) {
var aVal = $(a).find('[data-target-attr='+byDatum+']').text();
var bVal = $(b).find('[data-target-attr='+byDatum+']').text();
// looks reversed because we use append later, not prepend
var returnVal = bVal < aVal ? 1 : -1;
if (reverse) returnVal = -returnVal;
return returnVal;
});
$(busses).appendTo('.busses-container');
}
$(document).ready(function() {
$('.busses-heading div').click(function() {
if ($(this).attr('data-target-attr')) {
var isReversed = $(this).attr('data-reversed');
reverse = (isReversed && isReversed==='false') ? true : false;
sortBusses($(this).attr('data-target-attr'), reverse);
$(this).attr('data-reversed', reverse);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="busses-container">
<div class="row busses-heading">
<div class="col-lg-3" data-target-attr="company"><h3>Bus Company</h3></div>
<div class="col-lg-3" data-target-attr="features"><h3>Bus Features</h3></div>
<div class="col-lg-3" data-target-attr="time"><h3>Departure Time</h3></div>
<div class="col-lg-3"><h3>Book Now</h3></div>
</div>
<div class="row busses">
<div class="col-lg-3"><p data-target-attr="company">Bus Company One</p></div>
<div class="col-lg-3"><p data-target-attr="time">6:45 pm</p></div>
<div class="col-lg-3"><p data-target-attr="features">Seats</p></div>
<div class="col-lg-3"><p>Book Now</p></div>
</div>
<div class="row busses">
<div class="col-lg-3"><p data-target-attr="company">Bus Company Two</p></div>
<div class="col-lg-3"><p data-target-attr="time">7:45 pm</p></div>
<div class="col-lg-3"><p data-target-attr="features">Water, Toilet</p></div>
<div class="col-lg-3"><p>Book Now</p></div>
</div>
<div class="row busses">
<div class="col-lg-3"><p data-target-attr="company">Bus Company Three</p></div>
<div class="col-lg-3"><p data-target-attr="time">8:45 pm</p></div>
<div class="col-lg-3"><p data-target-attr="features">Toilet</p></div>
<div class="col-lg-3"><p>Book Now</p></div>
</div>
</div>
However, since your data is tabular in nature, it would be advisable to go ahead and use a table
Thanks for that answer...that code looks pretty good but I actually ended up finding this little script which ended up doing everything for me quite nicely...and its jQuery independant too!
http://tinysort.sjeiti.com/
Related
I have 2 divs
<div class="row events-list-section employee-hour-detail-section 11-28-2017">
</div>
<div class="row events-list-section employee-hour-detail-section 11-27-2017">
</div>
The divs have common classes employee-hour-detail-section and date as extra class.
I want to sort these divs according to date. How can I achieve that? I want the output to be sorted date wise.
<div class="row events-list-section employee-hour-detail-section 11-27-2017">
</div>
<div class="row events-list-section employee-hour-detail-section 11-28-2017">
</div>
To make this work you need to know the exact date value. Doing this in a class is possible, but it will be brittle and ugly code.
Instead I'd suggest putting the date in to a data variable in your HTML which you can then sort by comparing the values in a sort() handler, like this:
$('.events-list-section').sort(function(a, b) {
var aDate = $(a).data('date'), bDate = $(b).data('date');
return new Date(aDate) - new Date(bDate);
}).appendTo('body');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row events-list-section employee-hour-detail-section" data-date="11-28-2017">11-28-2017</div>
<div class="row events-list-section employee-hour-detail-section" data-date="12-31-2017">12-31-2017</div>
<div class="row events-list-section employee-hour-detail-section" data-date="01-01-2018">01-01-2018</div>
<div class="row events-list-section employee-hour-detail-section" data-date="11-27-2017">11-27-2017</div>
Is there any code that I could add to the header of every page that would insert HTML at 2 or 3 points on a page (probably in the body), spread out evenly? This would be amazing for the platform that I am currently working on.
For example, maybe you wanted to embed a video using this. Ideally, I could put the code in the header, and it'd insert it 2 or 3 times in the body -- spread evenly.
Here you go: https://jsfiddle.net/westryder907/808xtyq7/
$(document).ready(function() {
$('.body > div').each(function(i, el) {
if (i % 3 === 0) {
$(this).append(" Inserted text via jQuery 2.2");
if (i > 3) {
return false;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="body">
<div class="region1">
Region1
</div>
<div class="region2">
Region2
</div>
<div class="region3">
Region3
</div>
<div class="region4">
Region4
</div>
<div class="region5">
Region5
</div>
<div class="region6">
Region6
</div>
<div class="region7">
Region7
</div>
<div class="region8">
Region8
</div>
<div class="region9">
Region9
</div>
<div class="region10">
Region10
</div>
</div>
</div>
Why not just edit your code and manually insert content from an external file with PHP?
I think more information is needed to fully understand why you'd want to approach this with your current method. It just doesn't make much sense to me why you would want to do it like this?
i want to add a row only if the x in $scope.grp leaves no remainder when divided by 3. I was trying the following code.
<div class="card">
<div ng-repeat="x in grp">
<div class="row">
<div ng-if="x%3==0">
<div class="row">
</div>
<div class="col col-33">
/my rest of code here/
</div>
</div>
</div>
<div>
any suggestions how to do it?
Not sure whether the following is correct or not. But a way to achieve it is as following.
<div data-ng-app="" data-ng-init="grp=['one','two','three','four','five','six','seven']" class="container">
<div ng-repeat="x in grp" ng-if="$index % 3 == 0" class="row">
<div class="col-xs-3">{{grp[$index]}}</div>
<div class="col-xs-3" ng-if="$index + 1 < grp.length">{{grp[$index+1]}}</div>
<div class="col-xs-3" ng-if="$index + 2 < grp.length">{{grp[$index+2]}}</div>
</div>
<div>
I am assuming grp is a string array and used $index to group.
Jsfiddle
Check this:
if reminder is 0, row will be added
<div class="card">
<div ng-repeat="x in grp">
<div class="row">
<div ng-if="x%3==0">
<div class="row">
reminder 0
</div>
</div>
<div class="col col-33">
my rest of code here
</div>
</div>
</div>
Here is the code for controller
function ctrl($scope){
$scope.grp=[1,2,3];
}
Codepen : http://codepen.io/anon/pen/eJJKwr
I'm not very familiar with angularjs - however your html struct is wrong in this case. Your struct will create an empty "row" column before every third div. I don't know if there is a way to just open a "div" tag in an ng-if and close it at a later point.
You should consider just creating array chunks for your cards. So each chunk will hold 3 cards and then you can loop over the first level of chunks, and then over the second level of your array. It will look something like that:
<div class="card">
<div ng-repeat="grp in chunks">
<div class="row">
<div ng-repeat"x in grp"> // as mentioned, I got no clue about angularjs, so I don't know how to correctly address the values within the groups
<div class="col col-33">
my rest of code here
</div>
</div>
</div>
</div>
</div>
As mentioned before I have no clue about angularjs itself, however you should be able to create chunks (split your array into smaller arrays) like:
var chunks=[[1,2,3],[4,5,6],[7,8,9]];
I have a div table like for a page, is it possible to make it sortable like html table with javascript?
I moved from normal table because it was not possible for me to continue using it due to this How to add td rowspans to a table? and thus used the div table.
so I used this div table and the only thing im missing is how to make it sortable so I can sort it by item or price.. like datatables, tablesorter e.t.c
<div class="Header">
<div class="item">Item
</div>
<div class="desc">Description
</div>
<div class="price">Price
</div>
<div class="status">Status
</div>
</div>
<div class="Info">
<div class="itemName">
<div class="item">Item 1</div>
</div>
<div class="itemInfo">
<div class="List">
<div class="Desc">Description 1</div>
<div class="Box">
<div class="price">$79</div>
<div class="status">16 in stock</div>
</div>
</div>
</div>
</div>
full code here http://codepen.io/anon/pen/empqyN?editors=110 and here http://jsfiddle.net/a4fcxzra/
Here is a sorting handler: (the header classes need to be the same as where the info is, so changed in the header desc to Desc)
var sorting=1;
$(".Header div").each(function(){
$(this).click(function(){
var cl=$(this).attr("class") // get header class, this is where I get info from
sorting = sorting == 1 ? -1 : 1 ; // sorting asc or desc
$(".Info").detach().sort(function(a,b){
var str1=$(a).find('.'+cl).text(); // get text
var str2=$(b).find('.'+cl).text();
var n1 = str1.match(/\d+/)[0] //get digits in text
var n2 = str2.match(/\d+/)[0]
if(n1 != '' ){ // if its a number
return n1*sorting > n2*sorting; // sort by number
}else{ // sort by string
return sorting == 1 ? str1 > str2 : str1 < str2
}
}).appendTo($(".Header").parent());
})
})
Working Fiddle: http://jsfiddle.net/juvian/a4fcxzra/1/
You can sort an Array using JavaScript and then creating tags dynamically to place them within the column headers (which you should create in the html for better performance)
How can i wrap exactly half of the div's with another div using jquery or javascript
I have this
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>
I want this
<div class="wrap">
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
</div>
<div class="wrap">
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>
</div>
Try using this:
var posts = $('.post'),
postCount = posts.length,
postHalf = Math.round(postCount/2),
wrapHTML = '<div class="wrap"></div>';
posts.slice(0, postHalf).wrapAll(wrapHTML); // .slice(0, 3)
posts.slice(postHalf, postCount).wrapAll(wrapHTML); // .slice(3, 6)
This selects all .post, gets the number of elements found then halves that value to get the splitting point. It then uses .slice() to select a specific range of elements and .wrapAll() to wrap each selection in <div class="wrap"></div>.
Here it is working: http://jsfiddle.net/ekzrb/