I am using the jquery data table. I need to select the rows using the ordinary click, ctrl+A and shift key selection. sample is given below, using javascript and store the rows id in any variable. how we do that? if the samples are code please suggestion here
This is a sample
Same need that javascript , datatable
Let me give you a higher level logic
Create datatable with checkboxes. Make sure you generate id's for those checkboxes and corresponding rows.
On check box click, you can find the id of the row easily. Keep saving them in an array as you keep clicking.
If you want to select all at once, give a specific id for select all checkbox and on click of that checkbox, loop through your data table and grab all the rows and put them in an array.
Once you have the logic for onClick, you can easily add javascript keyboard events.
I apologize for not putting some code together, it's lot of code to write but simple enough.
Related
Good Evening to all,
I'm currently developing an app that fetch data from a DB via AJAX calling a .php file.
I've got a table with 4 columns, the first 2 columns contain a < select >, the third an input and the last a button.
The first row is static: i've got a php query that loads the information of the 1st,2nd and 3rd column with default values.
When the user choose change the value of the 1st select a trigger launch a Jquery function that drop-down update the content of the 2nd and 3rd column.
In the same way if the user change the value of only the 2nd column, only the 3rd column value will be drop-down updated.
If the user make changes only with the 1st row, the code has no problem, but if the user press the button and via an .append() the code add another row, with the same scripts as the 1st one, obliviusly the new row selects won't work.
Trying to fix this I created a php for that copies the Jquery change functions using the iterator as identifier for both functions and the rows of the table.
Using the code inspector of chrome I don't find any errors, but only the 1st row jquery select will work, that is strange considerated that the 1st row function is generated by the same php cicle that is used for the others.
The hair are falling of my head because of this problem, hope you can understand and help me.
Thank in advance
Events and handlers added to existing elements won't work on clones of those elements added later dynamically. Simply said, your functions to do stuff on drop-down etc on existing rows are limited to those only, and won't apply to any newly generated rows.
For a general solution, consider writing all the event handlers separately, and invoke those again when you add new rows on button click.
Hope this made sense!
I'm attempting to insert a form as a new row underneath a row generated by ng-repeat. I can successfully add a row to the data model using .splice() but I'm not able to render the HTML when it is inserted. I have researched methods to accomplish this and the ones that are mentioned the most frequently involve the $watch and $compile functions. The issue is that I do not have an original tag to insert into as this is a brand new row in the table.
Idea behind this:
I have a table of data with many rows. The table represents data on "actions" that are for employees to accomplish. We are creating a web app that allows them to view their own actions and update them in the web page rather than updating a spreadsheet.
I was originally inserting a row dynamically with jQuery but as we are aware - it breaks the DOM. I'm trying to take the angular approach as this is an angular app, but I'm struggling with how to accomplish this.
The row that is inserted is a form for all the fields chosen and some extra ones not shown in the "view". Ideally, this would expand a row downwards when they click a button at the end of the row containing the action they are trying to edit. When they are done they can click a save button which removes/collapses the row and saves the changes to the model. This change is then sent back to the API to write the changes back to the database.
View of the Table:
Table view
View of the Form:
Form
Basically, I'd like to dynamically insert the form between rows shown in the table. I have to avoid jQuery and use AngularJS if possible.
Anyone have a neat trick to accomplish this?
Code (had to remove some stuff for privacy):
Pastebin: jf1mv9WG
Cheers,
Tux889
If I understand your question (and assuming you are using angular 1x), maybe you can use ng-repeat-start and ng-repeat-end to render two rows for every item; and in the second row put the form inside a td[colspan=n] (where n is the number of columns in your table). And make the two rows mutually exclusive, for example the first row can have ng-if="!item.showForm" and the second row can have ng-if="item.showForm".
Take a look a this example that I prepared: https://jsfiddle.net/miguelerm/9pus3zoc/
You can try to use ngBindHtml directive.
You can bind html to your table.
I generate the table from user inputted data, the user can change the data after the page has loaded and I have to adjust the checkboxes accordingly (regenerating the code)
I'm trying to:
Call a JS function when a checkbox is ticked
Be able to get states of every one checkbox individually (list of all checkboxes and their values also applicable)
Set the values of every individual checkbox
I didn't see a way to do it, because in the source code, there are no checkboxes - only the table setting. Thus, I'm unable to set every individual checkbox its ID.
I wonder, is it possible to: get the code that is generated when the browser loads my page and the code the JS generates and serve it to straight from the server generated, but with individual IDs for every checkbox? In this case, how would I get the state of a checkbox?
If anything is unclear, feel free to ask for details.
Thanks in advance.
Do not use the mdl-data-table--selectable class. Instead, refer to https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes . It's already compatible with the actual MDL version, but in version 2 there will be ripples for these buttons...
(I myself finally solved the problem by avoiding tables and cooking a list class and using list for my information.)
A row is cheked when it has the class is-selected:
<tr class="is-selected">
</tr>
You can get and set the check state in Javascript by toggling this class.
I am working in a c# project using MVC framework and Razor for the front view.
I am developing a form with dynamic grid which works based on the option selected from the dropdown list. On selecting the option I will generate a dynamic row containing either textbox or checkbox. When the user clicks Add new button
I have to show another dropdown list with options. Again based on the option selected another dynamic grid is once again added in the form just below the above steps. So it will be in a situation with row of textboxes and another row with checkboxes. The user can also delete the rows.
To accomplish this, I have tried the following approach in Javascript:
I used two tables in that
one table will dynamically apend by the dropdown when the user selects a row from the list.
In another table has the values of number of textboxes or checkboxes will be appended accordingly based on the
dropdown value is selected.
In this approach it continously adds a new row on clicking add new button. But when the dropdown option in row1 is changed then the corresponding checkbox must be replaced with text boxes and vice versa.
And consider I have a row with textboxes and another row with checkboxes. When a checkbox in row2 is checked then the corresponding text box in row1 must be disabled.
In this above approach I have to fix the issues in the 1. and 2. steps.
Please let me know is there any better approach other than javascript to implement this logic in C# MVC Razor framework.
Please kindly suggest me the best approach for dynamic grid and also whether javascript is fine to pass the variables to the controller. Thanks in advance.
I am using this plugin (http://farhadi.ir/projects/html5sortable/) to create a feature for a website where a user can add form fields on the fly.
The idea is that they will give the form a name (title), and then add a series for form fields. These form fields need to be drag and drop sortable (thus the plugin) so the user can rearrange the order.
Once they are satisfied with the order, they will click the "Create Form" button, and the data to create the form will be submitted.
The data itself will be stored in three tables. Table 1: Forms, Table 2: Fields, and Table 3: Forms_Has_fields. The Forms_Has_fields table will includes a sort_order column, which tells the system in what order to display the fields.
That's where this question is important: when a field is re-sorted using the drag and drop feature, I need a way to save the sort order in an or some other form control so I can parse it with PHP and create the fields properly.
If this was in PHP, I would just keep everything in an associative array: ($fieldname => $sortorder), but that doesn't seem like it's an option in javascript. Ideally, I could keep this in an array in Javascript, and then when sumit was clicked, dump that array as a JSON to an field, and POST it to PHP. But if that's possible, I don't know how to do it.
If there is another (more elegant) way to handle this, I am open to suggestions.
Turns out, I was making it more complicated than it needed to be. I am giving you the points because you answered my question; however I did find a more elegant way of doing it. The is, in fact, the order and array already. There is no reason to create a separate array to manage what is being saved in what order because the does it already. All you have to do is itterate through it with .each().
And, best of all, I didn't have to use global variables