So, I am just testing out the Google material design. In the table component, it can select multiple rows.
I also have following function which deletes individual row (or the data that it contains)
<a onclick="return confirm('Are you sure?');" href="<?php echo wp_nonce_url( add_query_arg( array( 'action' => 'my-delete-product', 'product_id' => $post->ID ), my_get_navigation_url('products') ), 'my-delete-product' ); ?>"><i class="material-icons">delete</i></a>
Now, once the multiple rows are selected, I am not sure how to apply this delete function to the selected rows.
Here is what I have so far in terms of the design: (http://www.getmdl.io/components/index.html#tables-section)
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
I can have a button outside of this table. However I am not sure how to "link" the selected rows to the "delete" function itself. I am guessing I need to use jQuery or something.
Anyway, any suggestions will be appreciated.
Thanks!
No you dont. You just need to keep track the selected rows and then do the action when clicki g on delete.
There is an easier way, use a componenf which has a support for exactly what you need: https://github.com/iamisti/mdDataTable
Related
I have a bootstrap datatable-basic with a few pages.
In the first cell of the table is a checkbox.
The table looks like that just with a few more rows.
<table class="table datatable-basic table-hover" >
<thead>
<tr>
<th>Status</th>
<th>Keyword</th>
<th>Suchvolumen</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" id="checkboxManuellerStatus1" name="checkboxManuellerStatus[1]" value="abc"> abc</td>
<td class="keywordDataStyle">abc</td>
<td>abc</td>
</tr>
<tr>
<td> <input type="checkbox" id="checkboxManuellerStatus2" name="checkboxManuellerStatus[2]" value="abc2"> abc</td>
<td class="keywordDataStyle">abc</td>
<td>abc</td>
</tr>
</tbody>
All checkboxes have incrementing names and ids. checkboxManuellerStatus1,checkboxManuellerStatus2,checkboxManuellerStatus3,... and so on.
If I request the checkboxes in php, I get all the values of checked checkboxes.
$array = $_REQUEST['checkboxManuellerStatus'];
Thats good, except that I only get the values of the current page in the table, but I need all values of all pages. How do I do that?
Thanks
i want to pass view data from shown table on page 1 to page 2. for example, i have table filter used from javascript function. so, after filter the data i wanna it displayed on page 2 also. page 2 is for print and save in pdf file. how to get it parameter so that it displays the data from current table showned?
page1.blade.php (am not sure it is right or not)
<form target="_blank" method="post" action="print">
<table class=" table-autosort table-autofilter " border="1" width="100%" id="save">
<thead>
<tr>
<td>bil</td>
<td class="table-filterable table-sortable:numeric table-sortable"> faculty</td>
<td class="table-filterable table-sortable:numeric table-sortable"> programme</td>
</tr>
</thead>
<tbody class="bottom" >
#foreach($profiles as $profile)
<tr>
<td class="number" width="7%%"></td>
<td class="faculty" width="40%">{{$profile->faculty}} </td>
<td class="program" width="53%%"> {{$profile->programme}}</td>
</tr>
#endforeach
</tbody>
</table>
page2.blade.php
<table width="100%" class="printTable">
<thead>
<tr>
<td>bil</td>
<td>faculty</td>
<td>programme</td>
<td>student id</td>
<td>student name</td>
</tr>
</thead>
<tbody>
//possible code here //i dont know how to get it parameter
</tbody>
i have made this code to remove table row :
jQuery('tr#rowAttend1').remove();
HTML :
Three rows with same id .
For example :
<tr id="rowAttend1" ><td>ssss</td></tr>
<tr id="rowAttend1" ><td>ddddd</td></tr>
<tr id="rowAttend1" ><td>ccccc</td></tr>
but
i want all three to be removed
it works fine in all browsers except ie7 ?
Can anybody help me?
<tr id="rowAttend1" ><td>ssss</td></tr>
<tr id="rowAttend2" ><td>ddddd</td></tr>
<tr id="rowAttend3" ><td>ccccc</td></tr>
$('#rowAttend1,#rowAttend2,#rowAttend3').remove();
Change the ids to unique ids and then you can remove the table row
Class example
<tr class="rowAttend1" ><td>ssss</td></tr>
<tr class="rowAttend1" ><td>ddddd</td></tr>
<tr class="rowAttend1" ><td>ccccc</td></tr>
$('.rowAttend1').remove();
This will remove all elements with the class rowAttend
Your ID is not unique please use different ID for like,
<tr id="rowAttend1" ><td>ssss</td></tr>
<tr id="rowAttend2" ><td>ddddd</td></tr>
<tr id="rowAttend3" ><td>ccccc</td></tr>
(OR)
Pass particular eventcatch(e) (i.e) (this) to that javascript function and remove from that this like,
$(this).remove();
some different way try if u like
<table>
<tr><td>one</td> <td><button class="removeTR"> one</button></td> </tr>
<tr><td>two</td> <td><button class="removeTR"> two</button></td> </tr>
<tr><td>three</td> <td><button class="removeTR">three</button></td> </tr>
<tr><td>four</td> <td><button class="removeTR"> four</button></td> </tr>
<tr><td>five</td> <td><button class="removeTR"> five</button></td> </tr>
</table>
$("tr .removeTR").live('click', function() {
$(this).parent().parent().remove();
});
or some thing that gives good smooth row deleting
$("tr .removeTR").live('click', function() {
$(this).parent().parent().fadeOut(1000);
setTimeout(function(){$(this).parent().parent().remove();}, 1000);
});
i have some problems with my table i have this table for egs
<tr style="">
<td>1</td>
<td>item 1</td>
</tr>
<tr style="">
<td>1.1</td>
<td>item 1.1</td>
</tr>
<tr style="">
<td>1.2</td>
<td>item 1.2</td>
</tr>
<tr style="">
<td>1.1.1</td>
<td>item 1.1.1</td>
</tr>
i use jquery ui sortable but the problem is that if i want to move the item 1 the item1.2 and item 1.1.1 will also follow something like a group
fiddle link http://jsfiddle.net/kN2XL/
You should have a look at nestedSortable to implement this kind of functionality. Example
Unfortuately, you will however need to change your html from tables into a hierarchy, like <ul> <li> etc.
How can I get the class of the table when clicking the tr?
This is my code
<table class='table1' border='1'>
<tr class='graph1'>
<td>Test1</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph2'>
<td>Test2</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph3'>
<td>Test3</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
</table>
<table class='table2' border='1'>
<tr class='graph1-1'>
<td>Test1</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph2-1'>
<td>Test2</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph3-1'>
<td>Test3</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
</table>
When I click on
<tr class='graph2'>
<td>Test2</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
It should display 'table1'
or if I click on
<tr class='graph3-1'>
<td>Test3</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
It should display: 'table2'
Take not that this is dynamic, its not only graph2 or graph3-1 will be clicked.
how would I do that using jquery?
Any help would be greatly appreciated and rewarded! Thanks!
I would use closest() to find the table parent. See also http://api.jquery.com/closest/
$('.viewHistory').click(function() {
var classname = $(this). closest('table').attr('class');
alert(classname);
}
jQuery('table tr').click(function(){
//this is set to the row's DOM element
jQuery(this).parent('table').attr('class');
});
See the jQuery.parent for details.
Never used it personally so not sure about this, but jQuery.closest may give better performance compared to jQuery.parent.
Also, please note that the following code sample will attach click event for any table row in the document, so you'd better add some specific class to your tables (say clickable_table and use it like this)
jQuery('.clickable_table tr').click(function(){
//this is set to the row's DOM element
jQuery(this).parent('table').attr('class');
});
You can use the .parent() function (if you want to click the a tag, use it twice)
and the .attr("class") to get the class. I think there is also a .class or something but not sure right now.