In my code, I add an event listener to the pagination button. I can pass the page number to the function and set a new page number based on user input. Before changing the table data I want to clear the table. In this case, I am using datatable.empty() method but it gives me that the datatable.empty is not a function. Any idea how can I solve it?
function pageButtons(pages) {
var t = document.getElementById('test');
for (var page = 1; page <= pages; page++) {
//console.log(pages)
t.innerHTML += '<button id=' + page + '>' + page + '</button>';
}
document.getElementById('test').addEventListener("click", function (event) {
var newPageNumber = event.target.id;
var datatable = document.getElementById('data1');
state.page = newPageNumber;
datatable.empty();
console.log(state.page);
buildTable();
})
}
Related
What I have is a page which is gathering a large list of data via jQuery. I am trying to limit the amount of results shown to a variable, and change the results shown on the list to create a false-page effect. Everything works via the same JS function, and relies on 1 variable to make everything work. Simple. I've removed all of the extra code to simplify everything
function myFunction() { var page = 1; console.log(page); }
I am looking for a way to call on this function, but change the variable 'page' from within html. Something along the lines of:
2
I have been looking on google (and still am) I just can't seem to find what I am looking for. I'm trying to avoid multiple pages/refreshing as this element is going to be used for a larger project on the same page.
UPDATE: I managed to pass the intended values through to a JS function like so...
function myFunction(page) { console.log(page); }
...and...
<input type='button' onclick='myFunction(value)' value='input page number'>
This seems the simplest way of doing what I need, what do you think?
Thanks for your help btw guys.
To do this you will need to move the page variable to be a parameter of myFunction
function myFunction(page) { console.log(page); }
Then you can just pass in whatever page number you would like
2
Sure, you can add the data-url attribute to your markup and select on the .link class to fetch the data-url attribute for each element thats part of that class.
I'm trying to avoid multiple pages/refreshing as this element is going
to be used for a larger project on the same page.
Sounds like you also want an AJAX solution.
$(document).ready( function()
{
//Add this on your call.html page
$(".link").click(function()
{
//location of test JSON file
var root = 'https://jsonplaceholder.typicode.com';
//your custom attribute acting as your 'variable'
var page = $(this).attr('data-url');
console.log("page = " + page);
//remove any previous html from the modal
$(".modal-content").empty();
//send a request to the server to retrieve your pages
$.ajax(
{
method: "GET",
//this should be updated with location of file
url: root + '/posts/' + page,
//if server request to get page was successful
success: function(result)
{
console.log(result);
var res = result;
var content = "<div class='panel-default'><div class='panel-heading'><h3 class='panel-title'>" + res.title + "</h3></div><i><div class='panel-body'>''" + res.body + "''</i></div><p><u> Master Yoda, (2017)</u></p><p class='page'> Page: " + page + "</p></div>";
$(".modal-content").html(content);
},
//otherwise do this
error: function(result)
{
$(".modal-content").html("<div class='error'><span><b> Failed to retrieve data </b></span><p> try again later </p></div>");
}
});
});
});
.error
{
border: 2px dotted red;
margin: 5px;
}
a
{
font-size: 20px;
}
.page
{
text-align: left;
padding: 0 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a class="link" data-url="1" data-toggle="modal" data-target="#Modal" href="test.html">Show Page 1</a>
<br />
<a class="link" data-url="2" data-toggle="modal" data-target="#Modal" href="">Show Page 2</a>
<div id="Modal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
I seem to have figured out how to do this. I wanted to stray from using lots of libraries in the project and just wanted to keep things simple, using the above answers for guidance (and a little more digging), basically my end goal was to use jQuery to obtain a long list of data, and format this data into a multiple page list (for which I used a table for formatting purposes). Let's say it's a list of names. The JSON results output as:
[{"first_name":"Bob"},{"last_name":"Jones"}] // (key, value)
But when I passed this through to the HTML Table it was just displaying 1000s of results in a single list, and formatting the list was a pain. This was my solution:
<script>
var pageNum = ""; // define Page Number variable for later.
var resLimit = 35; // variable to specify the number of results per page
function updateList () {
$.getJSON(" Location of JSON results ", function(data) {
var pageCount = Math.round(data.length/resLimit); // calculate number of pages
var auto_id = ((pageNum-1)*resLimit) // use variables to give each result an id
var newListData = ""; // define this for use later
then define and pass "new list data" to HTML Table:
var newListData = "";
$.each(data.slice(auto_id, (pageNum*resLimit)), function(key, value) {
auto_id++;
newListData += '<tr>';
newListData += '<td class="id">' + audo_id + '</td>';
newListData += '<td class="id">' + value.first_name + '</td>';
newListData += '<td class="id">' + value.last_name + '</td>';
newListData += '</tr>';
});
$('# ID of table, data will replace existing rows ').html(newListData);
At this point if you set the value of pageNum to 1 you should see the first 35 results on the list, all with auto-incremented ID numbers. If you change it to 2 and refresh the page you should see the next 35, with the ID numbers following on from the first page.
Next I needed to create a button for each of the pages:
$('# ID of table, data will replace existing rows ').html(newListData);
function createButtons() {
var buttonArray = "";
for(i=0, x=pageCount; i<x; i++) {
buttonArray += '<input type="button" onclick="changePage('
+ (i + 1) + ')" value="' + (i + 1) + '">';
}
$('# ID of Span tags for button container ').html(buttonArray); }
createButtons();
}); }
</script>
Then create changePage() and a function to refresh the data in the list automatically without messing things up
<script>
var pageNum = "";
function changePage(page) {
if (pageNum < 1) { pageNum = 1; } // set pageNum when the page loads
if (page > 0) { pageNum = page; } // overwrite pageNum when 'page' variable is defined
updateList(); }
changePage(); // initialise to prevent delayed display on page load
// refresh function:
function refreshData() {
changePage(0); // define 'page' as 0 so that pageNum is not overwritten
window.setTimeout(refreshData, 5000); } // loop this function every 5 seconds to
refreshData(); //-- keep this list populated with current data.
And that should just about do it! At least it's working for me but I might have missed something (hopefully not lol). Hope this helps someone theres quite a few things involved in this that could be extrapolated and used elsewhere :)
thanks for help everyone.
Given an array of strings returned from an sql query, I am appending the data as rows into my html table via javascript:
loadUsers: function()
{ .
.
.
function displayUsersOnTable(response)
{
for(var i = 0; i < response.results.length; i++)
{
var contact = response.results[i];
var $newRow = $('<tr class="user-row">' +
'<td>' + contact.full_name + '</td>' +
'<td>' + contact.email + '</td>' +
'</tr>')
.data('user', contact);
$userTableBody.append($newRow);
}
}
}
Inside a different function that is called after loadUsers is called, I have this:
$('.user-row').click( function() {
window.alert("CLICKED");
});
When I run my site it won't register the click event. If I select the classes from my table row or table header it runs fine. I suspect the problem involves the fact that the table rows are dynamically generated. When I inspect element everything is in place. What am I missing?
try:
$(document).on('click', '.user-row', function() {
window.alert("CLICKED");
});
Before I begin, I should mention I am using Javascript but I'm not using JQuery.
I have a function which obtains data from a site and displays it in an HTML table.
I would like to add a checkbox to each row, and find if each one has been checked or not later (i.e. when a button is clicked), outside of the function that creates the table.
The reason for this is that the function that makes the table only runs once and can't check if the box is checked or not (the user hasn't had a chance to check any yet!).
Each checkbox relates to other data displayed on the same row, which I can access outside of _cb_findItemsAdvanced(root) by declaring the 'items' variable before the function begins. However, I can't seem to do this for checkboxes.
I can add normal checkboxes to the table with:
"<input type=checkbox...".
However, I can't seem to access them from outside of the function that makes the table (and calls for the data). I've tried:
document.form1.sharedCheckboxName
It didn't seem to work.
I have tried everything, from creating a global checkbox array and trying to specify
" + checkbox[i] + "
instead of
"<input type=checkbox...",
but it didn't work. I know my current code has just specified a variable of type checkbox, rather than what I want which is to populate the table with my existing, global, array of checkboxes.
Any help would be greatly appreciated, as I am lost! I hope you're not, after reading that! :-)
Here is my code:
var items;
var checkbox = [];
function _cb_findItemsAdvanced(root)
{
items = root.findItemsAdvancedResponse[0].searchResult[0].item || [];
var html = [];
html.push('<table width="100%" border="0" cellspacing="0" cellpadding="3"><form name="form1"><tbody>');
for (var i = 0; i < items.length; ++i)
{
var item = items[i];
var title = item.title;
var pic = item.galleryURL;
var viewitem = item.viewItemURL;
checkbox[i] = document.createElement('input');
checkbox[i].type = "checkbox";
checkbox[i].name = "name";
checkbox[i].value = "value";
checkbox[i].id = "id" + i;
if (null != title && null != viewitem)
{
html.push('<tr><td>' + '<img src="' + pic + '" border="0">' + '</td>' +
'<td>' + title + '</td>' + '<td> <input type = "' + checkbox[i].type + '" + </t></tr>');
}
}
html.push('</tbody></table>');
document.getElementById("results").innerHTML = html.join("");
}
if (checkbox[0].checked)
{
alert("HI"); //but nothing happens
}
since you are using html string forget about the checkboxes array.
your form should wrap the table not the other way around.
give your form an id
<form id="form1">
get the form and find all checkboxes
function findCheckedItems() {
var checkedItems = [];
var form = getElementById('form1');
var inputs = form.getElementsByTagName("input");
var checkboxIndex = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type.toLowerCase() === 'checkbox') {
if (inputs[i].checked) {
var data = item[checkboxIndex];
checkedItems.push(data);
// do whatever you like with the data
}
checkboxIndex++;
}
}
return checkedItems;
}
Basically, on clicking any image on a html page I want the id associated to be passed to a function.
This is what I have tried. It seems I am making a minor mistake here as I am getting the first id passed no matter what image I click from the array. I tried $(this).attr("id") as well, but did not work.
for(var i=0;i<jsonObj.length-1;i++){
var rows = '';
var bg_img = jsonObj[i].img;
var bg_img = decodeURIComponent(bg_img);
rows = "<img id='" + jsonObj[i].source_id + "' src='" + bg_img + "'/>";
document.getElementsByClassName('subscription')[i].innerHTML = rows;
}
$("body").delegate(".subscription", "click", function() {
// var id = $(this).attr("id");
alert("Welcome Test " + $('img').attr("id"));
return false;
});
$("img").click(function()
{
var id = $(this).attr("id");
});
Your $('img') selector is not confined to any specific area, so it will give you the first image on the entire page.
Try $('img',this) instead.
I am using the following code to show my latest tweets from the new twitter API. I've got it working perfectly, however, no matter what I do I can only get it to show one tweet, how can I make it show 5 tweets?
here is my code:
<script type="text/javascript">
var twitterFetcher=function(){var d=null;return{fetch:function(a,b){d=b;var c=document.createElement("script");c.type="text/javascript";c.src="http://cdn.syndication.twimg.com/widgets/timelines/"+a+"?&lang=en&callback=twitterFetcher.callback&suppress_response_codes=true&rnd="+Math.random() document.getElementsByTagName("head")[0].appendChild(c)},callback:function(a){var b=document.createElement("div");b.innerHTML=a.body;a=b.getElementsByClassName("e-entry- title");d(a)}}}();
twitterFetcher.fetch('345901443028488192', function(tweets){
// Do what you want with your tweets here! For example:
var x = tweets.length;
var n = 0;
var numtweets = 5;
var element = document.getElementById('tweets');
var html = '<ul id="tweetul">';
if (tweets[n].innerHTML) {
html += '<li><img src="images/myicon.png" class="twittericon"/>' + tweets[n].innerHTML + '</li>';
} else {
html += '<li><img src="images/myicon.png" class="twittericon"/>' + tweets[n].textContent + '</li>';
}
n++;
html += '</ul>';
element.innerHTML = html;
});
</script>
You are not looping. You increment n, but you're never going back to the code above it.
you can get a new version of the api here :
http://jasonmayes.com/projects/twitterApi/#sthash.CAN6FObk.dpbs
then you can write this :
twitterFetcher.fetch('345170787868762112', 'example1', 1, true);
change with "1" in the code above count of tweets you wanted.
I hope you could help.