Im trying to append the last id of the URL into the search box of a DataTable. My URL looks like this:
Here I want to get the CL00074 value and append into the search box, like this:
[![enter image description here][1]][1]
<style>
thead {
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}
</style>
<script>
//this is for search
$(document).ready(function () {
$('#dataTables-example').DataTable({
responsive: true,
"order": [[0, "desc"]],
"columnDefs": [{
"targets": 'no-sort',
"orderable": false
});
});
</script>
<script>
var url = window.location.href;
var id = url.substring(url.lastIndexOf('/') + 1);
// alert(id);
$(document).ready(function () {
$('#dataTables-example').append(id);
});
</script>
If you don't understand what I'm asking, let me know guys. Any help is much appreciated
->Thank you guys fro your reply #Rory McCrossan and #Jameel Ahmed Ansari. I have find the solutions .
var id = url.substring(url.lastIndexOf('/') + 1);
// alert(id);
$(document).ready(function () {
$('#dataTables-example_filter input').val(id);
$('#dataTables-example_filter input').keyup();
});
Firstly, to retrieve the required part of the URL it would be easier to split it in to an array and retrieve the final element. You can then use the fnFilter() method of the dataTable to programmatically search for that value:
var dt = $('#dataTables-example').dataTable({
// setup here
});
var id = window.location.href.split('/').pop();
dt.fnFilter(id); // perform the search.
$(document).ready(function () {
var dt = $('#dataTables-example').dataTable({
// setup data table here
});
l=location.href; // to get current URL
// or
l="http://localhost/eezyclinic/Admin/clinicsubmissionslist/CL00074";
url_arr = l.split("/") ;
id = url_arr[url_arr.length-1];
dt.fnFilter(id);
});
Related
So I cannot get all of the checked boxes without an error. I am using dataTable but it seems to be erroring out.
Here is my code:
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable({
"dom": '<"top"fl>rt<"bottom"pi><"clear">'
/*'<"top"lf>rt<"bottom"p><"clear">'*/
});
});
function selectAllUsers() {
$(':checkbox').each(function () {
this.checked = true;
});
var table = $('#myTable').dataTable({
});
var allPages = table.fnGetNodes();
$('input[type="checkbox"]', allPages).prop('checked', true);
}
</script>
The code above will select all boxes but then I get a second error message with the dataTable.
but if I do:
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable({
"dom": '<"top"fl>rt<"bottom"pi><"clear">'
/*'<"top"lf>rt<"bottom"p><"clear">'*/
});
});
function selectAllUsers() {
$(':checkbox').each(function () {
this.checked = true;
});
var table = $('#myTable').dataTable({
});
}
</script>
Then I only get the first page checked. Any help would be greatly appreciated.
Solution: https://datatables.net/plug-ins/api/fnGetHiddenNodes
That will show you how to get non-rendered checkboxes.
i've a problem with my datatable...
The problem is: I can't change the page after inizialization....
The workflow that i desire is:
A user select a radiobutton in page 3
i save the id of this radio and the curent page
i destroy datatable
when user re-enter in datatable (re-creating datatable) I wish that user would go directly to the page 2
This is my code:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
});
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
});
P.S. 2 is an example to test function :)
But i get this error in consolle:
Uncaught TypeError: oTable.fnPageChange is not a function
What can i do?
Thanks
Use stateSave, it will do exactly what you need atomatically :
var oTable = $("#id").DataTable({
stateSave : true,
...
});
Now each time the table is instantiated it will restore the settings from last session, i.e pagination, sorting, search-phrase ...
Could you try this ?
$(document).ready(function() {
var currentPaging = 1;
$('#example').DataTable( {
responsive: true
} );
var oTable = $('#example').dataTable();
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
$('#example').on( 'page.dt', function () {
var info = $('#example').DataTable().page.info();
var page = info.page + 1;
alert('Current paging : '+page);
currentPaging = info.page + 1;
});
$('#memorizePaging').on("click", function (e) {
alert("I'm on the page : "+currentPaging);
});
} );
I did a fiddle to show you fnPageChange works : https://jsfiddle.net/z4zgp9az/5/
It seems the "DataTable" should begins from small character "dataTable"
It should helps:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
change to:
$('.js_select').click(function (e) {
var oTable = $("#id").dataTable({
......
I am woking with jQuery UI and I made an attempt to create a "to do list" app. I have it functioning up to a point, but the task won't display correctly in the sort div I have attempted to create. It's supposed to display as a "bar" with a delete button and a completed option. But it currently displays as text. Am I supposed to incorporate jQuery directly inline in the html as well?
Here is my fiddle of the app in it's current state:
Todo List App FIDDLE
I will display only the jQuery portion of the coding. The complete version is on the Fiddle.
$("document").ready(function() {
$('#due_date').datepicker();
$('#add_task').button({ icons: { primary: "ui-icon-circle-plus" } }).click(function() {
$('#new_task').dialog('open'); }); // end click
$('#new_task').dialog({ width: 350,
height: 300,
modal: true,
autoOpen: false,
close: function() {
$('#new_task input').val(' '); /*clear fields*/
}, buttons: {
"Add Task" : function() {
var task_name = $('#task').val();
var due_date = $('#due_date').val();
var begin_li = '<li><span class="done">%</span><span class="delete">x</span>';
var task_li = '<span class="task">' + task_name + '</span>';
var date_li = '<span class="due_date">' + due_date + '</span>';
var end_li = '</li>';
$('#task_list').prepend(begin_li + task_li + date_li + end_li);
$('#task_list').hide().slideDown(250).find('li:first')
.animate({ 'background-color':'rgb(255,255,204)' },250)
.animate({ 'background-color':'white'},750)
.animate;
// end animate
$(this).dialog('close');
}, "Cancel" : function() {
$(this).dialog('close');
}
}
});
// end dialog
//Marking as complete
$('#task_list').on('click', '.done', function() {
var task_item = $(this).parent('li');
var $this = $(this);
$this.detach();
$('#completed_list').prepend($this);
$this.slideDown();
});
});
//Sortable
$('.sortlist').sortable({
connectWith: '.sortlist',
cursor: 'pointer',
placeholder: 'ui-state-highlight',
cancel: '.delete,.done'
});
//Delete
$('.sortlist').on('click','.delete', function() {
task_item.effect('puff', function() {
$(this).remove();
});
});
Help and guidance is greatly appreciated!
One problem is with your click event. You are only moving the .done span element to the completed list. Try this:
$('#task_list').on('click', '.done', function () {
var $this = $(this);
var task_item = $this.parent('li');
$this.detach();
$('#completed_list').prepend(task_item);
task_item.slideDown();
});
In this case, the span.done is still being removed, but the whole li element is moved to the lower list.
There is also a problem in your CSS, corrected code below:
#task_list li, #completed_list li {
border: 1px solid rgba (0, 0, 0, 0.3);
padding-top: .1em;
line-height: 170%;
margin-top: .2em;
}
The original code had an extra curly brace after rgba, which presumably had a knock on effect on subsequent code.
EDIT
The delete function is also a little faulty. Here's the corrected code:
$('.sortlist').on('click', '.delete', function () {
var task_item = $(this).parent('li');
task_item.effect('puff', function () {
$(this).remove();
});
});
(basically, task_item wasn't defined).
Regarding the title, the problem is that id attributes must be unique, but in your HTML, 2 elements have id="task". If you change your input tag to something like:
<input type="text" name="task_title" id="task_title">
...and your jQuery code to:
var task_name = $('#task_title').val();
...the title should appear.
I have a list of selectable buttons, whose names are being dynamically generated by reading from a JSON file. Every time a button is clicked, I want the get its title, i.e. row["name"]. Here's my relevant code and the JSON:
<head>
<script>
$.getJSON("json-data.txt",function(data){
var items = [];
$.each(data['data'],function(i, row){
items.push("<li class = 'ui-widget-content'>" + row["name"] + "</li>");
});
$("<ol/>",{
"id" : "selectable",
html : items.join("")
}).appendTo("body");
});
var selectableObj = {
selected: function(event, ui){
}
}
$(function() {
$( "#selectable" ).selectable(selectableObj);
});
</script>
</head>
<body>
</body>
The JSON data:
{
"data": [
{
"name": "ABC",
"visited" : "Yes"
},
{
"name": "DEF",
"visited" : "Yes"
},
{
"name": "GHI",
"locked": "No"
},
],
}
This works, in that I get a list of selectables in the format:
<ol id="selectable">
<li class="ui-widget-content">ABC</li>
<li class="ui-widget-content">DEF</li>
<li class="ui-widget-content">GHI</li>
</ol>
When I click on, say, the first button, I want to get the value "ABC". I don't know how to do this. I read about .text(), but cannot understand to use it. Can anyone help please?
EDIT - Based on some comments, I changed my code like this, but it doesn't work:
<script>
$(function() {
$( "#selectable" ).selectable();
});
$.getJSON("json-data.txt",function(data){
var items = [];
$.each(data['data'],function(i, row){
items.push("<li class = 'ui-widget-content'>" + row["name"] + "</li>");
});
$("<ol/>",{
"id" : "selectable",
html : items.join("")
}).appendTo("body");
});
$('.ui-widget-content').click(function(){
var text = $(this).text(); // this get the text
alert(text); // do whatever you want with it
});
</script>
I think this is what you looking for
selected: function() {
$( ".ui-selected", this ).each(function() {
alert($(this).text());
});
}
});
DEMO
$('#selectable').on('click', 'li', function(evt){
var text = $(this).text();
console.log(text);
});
The explanation is of how this works is that it attaches a click event to the parent of the list item, which is #selectable in the code you provided. Binding an event to the parent element attaches one event to the DOM in total instead of attaching an event for every list item, so it is very efficient. This concept is known as event delegation.
The function that appears inside of on() uses the $(this) selector, which makes sure you are getting the text of the item that has been clicked upon only.
You can do this:
$('.ui-widget-content').click(function(){
var text = $(this).text(); // this get the text
alert(text); // do whatever you want with it
});
DEMO: https://jsfiddle.net/lmgonzalves/pqo1r96p/
EDIT:
Please try this way instead:
$('body').on('click', '.ui-widget-content', function(){
var text = $(this).text(); // this get the text
alert(text); // do whatever you want with it
});
DEMO: https://jsfiddle.net/lmgonzalves/pqo1r96p/1/
This is my first time asking on Stack Overflow so bear with me.
I have been trying to implement an HTML page using Jquery and Javascript. Here is a sample JSFiddle of my page: http://jsfiddle.net/R63Hz/2/. Notice the three tables at the top have elements that map to the nested accordion structure at the bottom. I would like to use Javascript to map the links in these tables to open the appropriate accordion section. I have tried alot of methods but I think I don't have enough knowledge to figure it out.
Here is my most recent attempt at a solution:
$(this).on("click", ".linkButton", function () {
var $tbl = $(this).closest("table");
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
var table = $tbl.attr("id");
if(table=="table1") {
("#accordion").accordion({ active: 0 });
("#accordion2").accordion({ active: row });
}
else if(table=="table2") {
("#accordion").accordion({ active: 1 });
("#accordion3").accordion({ active: row });
}
else if(table=="table3") {
("#accordion").accordion({ active: 2 });
("#accordion4").accordion({ active: row });
}
});
I am not sure if the 5th line is working to set up for the conditional statement.
You could assign a data value to the individual links then in the on.click handler create an if statement that would expand the relevant accordion section.
Your fiddle is very long/messy which is why I've not edited the Fiddle with an exact solution but I hope that the above makes sense.
Here is the solution I found :
I renamed the linkbutton classes to linkbutton1 for the first table, linkbutton2 for the second and linkbutton3 for the third. Then I created the conditional opening on JQuery based on that. The main thing I had screwed up was I forgot $ signs in front of the commands to open the accordion.
$(this).on("click", ".linkButton", function () {
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
$("#accordion").accordion({ active: 0 });
$("#accordion2").accordion({ active: row });
});
$(this).on("click", ".linkButton2", function () {
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
$("#accordion").accordion({ active: 1 });
$("#accordion3").accordion({ active: row });
});
$(this).on("click", ".linkButton3", function () {
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
$("#accordion").accordion({ active: 2 });
$("#accordion4").accordion({ active: row });
});