I am displaying data of dates in my datatable using timeago.js along with the use of PHP. The problem is some data specifically dates in my datatables are missing when I click on the next page of my datatable. I don't know how to fix this, please help.
This is my Datatable-Table on its first page
Date_Joined Username
8 minutes ago john
10 minutes ago jake
20 minutes ago jay
And this is the next page of my datatable showing no date
Date_Joined Username
may
june
april
and if i click on my datatable to view 10, 25, 50, 100 pages
Date_Joined Username
8 minutes ago john
10 minutes ago jake
20 minutes ago jay
may
june
april
Please I really need your help.
Add this code inside your tag. It should work when you click the next page.
inside $("") add the table id and add _paginate next to it
$("#simpledatatable_paginate").click(function(){
jQuery("abbr.timeago").timeago();
});
While the above code works only for the pagination. This code here will allow you to solve your problem. Replace the above code with this code:
$("#simpledatatable").on('draw.dt', function(){
jQuery("abbr.timeago").timeago();
});
add this code before you iniatilize your datatable.
Related
Not much coding experience, but hoping the community can help. I'd like to have a simple HTML headline read the following:
"Meals are available for pickup on Sunday,February 23 and Monday, February 24."
The crux is I need this to change every Thursday at 1 p.m. so that the dates change to the dates of the FOLLOWING Sunday & Monday.
--
We are a meal prep service with new menus every week. Order cut off is every Thursday # 1 p.m. I've automated the site's meal menu to rotate at this time. With this dynamic headline, I hope to avoid customer confusion so that if someone orders on Thursday # 2 p.m., they know their meals aren't going to be available until the following weekend.
Hope that makes sense. Thanks in advance for the help!
You can do this quite easily using the php time functions
Example:
<?php
$monday_date = strtotime('next monday');
$sunday_date = strtotime('next sunday');
?>
<!-- Some content -->
<div class="header">Meals are available for pickup on Sunday,February $sunday_date and Monday, February $monday_date</div>
<!-- Some more content -->
The above example wont rotate at 1pm but will show the date of the closest sunday/monday. I leave it as an exercise to the reader to work out how to adapt it for timings (hint: the time library can detect the current time)
I'm trying to develop a progress bar which gets filled by the amount of time that has passed in two shifts at work.
The first one starts from 7:00 am to 17:00 pm and the second one is from 17:00 pm to 2:00 am from the next day.
I investigated and found this fiddle.
in this part:
$self.prev(".percent").text("0%");
$.ease(0, targetVal, 10000, "swing", function (i) {
$self.progressbar("option", "value", parseInt(i));
$self.prev(".percent").text(parseInt(i) + "%");
The problem is that it fills the progress bar continuously, but I need it to stop the progress bar when there are lunch breaks, (9:30am to 10:00am, and 12:00pm to 12:30pm by example, in the first shift) and I truly don't know how to do it.
Which is the best approach possible to do it? I tried to convert the working hours to minutes (substracting the lunch breaks) but it still is incorrect.
Thanks in advance.
Plunker- http://plnkr.co/edit/RVKzD9kXNNxinShK7nLU?p=preview
I have a plunker which has the date displayed and a small icon where we can select any date we want and it will update it in the input field.
My problem is - i need to display the previous day when user opens the page. Currently here it displays presnt working day.
Also, while selecting previous day, i need not include weekends. i.e. saturday and sunday should be ignored. For e.g. today is 11th April. For previous date selection, i want 8th April to directly show up. 9th and 10th being saturday and sunday should be ignored.
Can someone please have a look.
Please ignore the below html code as it didnt allow me to post the question until i write some code. The plunker has the code which i am using.
<!doctype html>
</html>
You can do this by checking the date.getDay() and decrementing accordingly.
$scope.today = function () {
var lastWorking=new Date();
lastWorking.setDate(lastWorking.getDate()-1)
// 0 for Sunday and 6 for Saturday
while(lastWorking.getDay()==0 || lastWorking.getDay()==6){
lastWorking.setDate(lastWorking.getDate()-1);
}
$scope.tradeDate = lastWorking;
};
Updated Plunk
I have downloaded and tried the jQuery DatetimePicker control from http://plugins.jquery.com/datetimepicker/. This is v2.3.7.
And in the download there is an image attached here which shows the selectors on both hours and minutes. But I haven't been able to find anything in the documentation on how to achieve that. Could someone please point out how to achieve this?
$('#' + subgridid_complete).datetimepicker({
format: 'mm/dd/yy H:i',//'d.m.Y H:i',
//inline: true
mask:true,
});
This is what I get using the code above. Notice that the Hour and minute are not independently selectable.
Many thanks
No example on the page shows a freely choosable time. You can use 'step' to specify for example a 15 minute step in the time scroll-bar.
You can also switch to the trentrichardson.com/examples/timepicker (a jquery-ui-addon). Here, the Time can be chosen, like in that example: trentrichardson.com/examples/timepicker
If you want 15 minute intervals try:
step: 15,
From the documentation >> For time only
jQuery('#datetimepicker5').datetimepicker({
datepicker:false,
allowTimes:[
'12:00', '13:00', '15:00',
'17:00', '17:05', '17:20', '19:00', '20:00'
]
});
For datepicker with date and time use:
jQuery('#datetimepicker4').datetimepicker({
format:'d.m.Y H:i'
});
datetimepicker4 and datetimepicker5 are textbox id on which you want to open calendar
Have you seen this? http://xdsoft.net/jqplugins/datetimepicker/
This contains few examples on how to use the datetimepicker, and also use moment.js with this.
I tried that before, too. No example on the documenation page shows a freely choosable time.
So I switched to jquerUI-timepicker. Here, the Time can be freely chosen. Many examples are provided.
Say I use a table to display scheduled content, and I want rows to disappear after their date has passed.
Row 1 has Table title
Row 2 has Date A
Row 3 has Scheduled content A1
Row 4 has Scheduled content A2
Row 5 has Date B
Row 6 has Scheduled content B1
Row 7 has Scheduled content B2
Row 5 has Date C
Row 6 has Scheduled content C1
Row 7 has Scheduled content C2
etc.
After Date A has passed, I want rows 2-4 to disappear/be hidden.
I do this website on a volunteer basis, and there is nobody else available to help. I delete the expired rows on a daily basis, but I'm going on vacation and will be unplugged for two weeks.
I don't have any example code, I'm a rookie. If you mean my html code, it's just a simple table.
Sorry for not responding sooner, Jakub (https://stackoverflow.com/users/158014/jakub). Spent 12+ hours in hospital ER with my daughter right after my last edit yesterday. I will come back and fix the post to conform to Stackoverflow standards ASAP.
You can use jQuery library to hide certain parts of the website on certain dates. It should help on this case while you are off.
First load jQuery, adding to the head section of your site:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then your table in the body section:
Then, near the end of the body tag, you create a rule for hiding content based on a date:
<script type="text/javascript">
var now = new Date();
var futuretime1 = new Date("April 10, 2013");
if(now > futuretime1)
{
$("#div").hide();
}
</script>
This will hide #div when date passes "futuretime1". You can also use jQuery selectors for selecting the appropriate table row.
Hope this helps.