i'm using the PDO library in php to access a database and return some values into a table which need to be shown when the user first opens the webpage,
after this I want to implement a filter option, so that the user can input some data in a form field and the data shown is updated according to the filters set by the user.
I don't know how to update the DOM in this case, would it be possible to update the DOM using Jquery so that only the new values are shown in the table, or do i need to redirect to a new page/reconstruct my table with a full request/response cycle.
thank you for your help in anycase.
If I understand correctly, you want to output the data from the result of your MySQL query as a table, and then having a search bar which will filter the output table according to the search bar. What I would do is first use the data to generate a table and give it a css class. For the search bar you can use form or event listener to process apply your filter from the value in the search bar. For example you can loop the rows of the table and check if a column contain a substring of the search bar value(as an example, check with whatever criteria you prefer) and just add a css value display: hidden to the row, or restructure the table, there are many ways of doing it.
Related
I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.
here is the link
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts
Please let me know if more details required.
I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.
You gave the Data table wrong model. you are mixing between different models in your code.
I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts
There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.
For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.
DEMO
If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.
Annoying Button
The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.
ngAfterViewInit (){
this.addData();
}
I want to preselect a row in my datatable and I am using the row('#rowID').select() function for that. It does select the row but it doesn't select the corresponding page where that row is.
I know there exists an option displayStart:
$('#example').dataTable( {
"displayStart": 20
} );
to start on a specific page, but it requires the number of the row in the source list not the id of that row.
Is there a way how to initialize the page using the rowID?
EDIT: The data is taken from the server, not in client.
Use row().show() API method to display page containing required row.
Please note that you need to include additional JS file //cdn.datatables.net/plug-ins/1.10.12/api/row().show().js for this API method to work.
table.row(1).show().draw(false);
See this example for code and demonstration.
I have two pages First.html and Second.html. In Second.html i have one search button that redirect to second.html and once I choose the value it will populate the value in first.html. But the problem is in first.html the table has two id ="major". Based on the search button it will populate the value in the particular major box. How to achieve this ?
You can access two different elements with same id like this:
var table=$("table#major");
var inputelement=$("input#major");
As the comment suggested, IDs should be unique in your HTML. To determine which row you want to manipulate, use the ID from the table and use the table's rows collection...
document.getElementById("Major").rows[rowNumber].cells[1].children[0].value;
...rowNumber will probably need to be manipulated to ensure you are on the correct row. With your code, the first row you care about is row 2.
I’m developing a simple CRUD based application for upskilling purposes.
Currently, the application outputs the result of a select query to a HTML table using JSTL. The last column of this table has a Delete link for each record which sends the parameters action=delete&id=1 to the server. The id param value part of the href of these links are obviously dynamically generated with JSTL based on the database record key that is passed into the JSP with the database results.
Instead of having this Delete column, I want the user to “select” a row and click a Delete button at the bottom of the table, which will send the above parameters to the server.
I am unsure how to accomplish the following to achieve this:
(1) In Javascript, how can I allow the user to “select” a table row. I don’t want the table to have radio buttons. The behaviour should be that the user clicks the row, the entire row colour changes and JS retains the index of the selected row. Only one row can be selected at a time. If the user clicks the row again, it becomes deselected, i.e. the colour is returned to its original colour and JS no longer identifies that row index as being highlighted.
(2) If I don’t have a Delete link specific to each db record, how can I identify the key of the db record to be deleted and return this to the server when the Delete button is clicked. For example, currently if the record in the db has an PK of 123456, my JSTL will generate a href action=delete&id=123456 for that specific Delete link. So, how can I link that id to the selected table row without having to actually display that id in the HTML table.
1) There are plenty of ways to do it. I suppose all of them will involve the use of something like var rows = document.getElementsByTagName("tr"); or its jquery (or other framework) equivalent. Or some other selector, maybe by CSS classname, could be used. Followed by a loop in which you deselect all the rows that were not clicked and select only the one that was recently clicked. Changing the color equals just changing the css class assigned to the DOM element basically.
2) You will use Javascript either to append to the DOM an html form with hidden inputs (<input type='hidden'.../>) and then submit it via Javascript (if you're Ok with moving to a different page and back). Or you can use Javascript to send an Ajax request to the delete servlet, and then remove the particular tr from the page when you receive a success response back.
I have a table with a bunch of rows. In the last column of every row, there is a dropdown. When the dropdown changes, I need a new table row to appear below the row where the user selected the dropdown item. However, I also need the new row to have different data depending on what was selected in the dropdown.
Is any of this possible using only jQuery?
Note that I'm using ASP.NET for back-end development, so if a solution can be found without using ID's that would be great.
$("table select").live("click",function(){
var row=$(this).parent().parent();//add some .parent() untill you get the TR element
var val=$(this).val(); //<select> value if you want to use it for some conditions
$("<tr><td>....</td></tr>").insertAfter(row);
})
It's simple enough to add the HTML using JQuery. However, if you intend to save this data back to the server, the default ASP.NET process (using ViewState) will ignore the new rows. Instead, you would need to directly read the submitted form properties.
To learn how to add a row, look at the suggestions here: How to add a new row to a specified table with jQuery?