I have a table built dynamically with PHP. The PHP gives each row an on click event that highlights the selected row and display details associated with it in another section of the page.
I wanted this table to be sortable so I started using this:
http://tablesorter.com/docs/
That worked great, it was sortable, selectable, and moderately fast.
I started looking into fixed headers as well and found this:
http://www.tablefixedheader.com/
Sorting and fixed headers. Awesome.
This works in all the ways I want to but it's unfortunately slow and gets rid of the onClick event I create for each table row.
That's not acceptable, in fact, it fundamentally breaks my application.
Is there a better plugin, a way to prevent this or an easier solution?
I need a sortable table with a fixed header that allows me to add unique onClick events and IDs to each table row. And I really don't want to write my own...
DataTables changed my life.
http://datatables.net/index
The fixed header functionality is an "extra": http://datatables.net/extras/fixedheader/
Related
I am looking at customising the yii cgridview. I want to be able to allow users to select which columns they wish to see. Currently I am selecting the exact columns which will be displayed.
I have had a look for information on this but do not seem to be getting very far, maybe I am not looking for the correct terms or their is a specific term for this. Ideally users can click a button and tick the boxes which will be seen. I have seen this implemented on x2crm
http://demo.x2engine.com/index.php/accounts/index
I also like the ability to move the columns around ie resort the order of the columns and the ability to resize the columns when more are added. I realise someone isn't going to come along and do this for me, but certainly if someone could provide me any information or similar requests, it would be greatly appreciated.
After a long gruelling search I have found something that may in fact be the solution to both of my requests. An extension for Yii exists that allow for you to chooser the columns you wish to display with a simple tick box selection, as well as allowing for reordering of columns.
http://ecolumns.demopage.ru/index.php
The link above takes you to the demo page for the extension and the link below is the link to the extension download page.
http://www.yiiframework.com/extension/ecolumns/
This is by far the easiest way to implement this functionality on your web app.
Start by reading the docs for CGridView,
The constructor for it takes in an array specifying which columns to display (and whether to allow sort on them, etc) so allowing users to select which columns they want to see is almost trivial:
Display a form with checkboxes, the values of which are the names of the columns. When the user submits the form, loop over the checkboxes and add each of the present fields to the array that is passed to CGridView.
It is a little more complicated if you want to have specific settings for the column (i.e. a specific column header, or formatting) however not too much - in that case you just define an array holding the settings for it, and add that array to the total array you submit to CGridView.
Allowing drag and drop of the columns is a far more challenging enterprise, and may not actually be possible without a custom implementation - this is because CGridView is inherently just a table i.e. you could drag and drop rows easily (as they are whole items), but dragging a dropping a row is in reality dragging and dropping a lot of separate cells. However, there are jQuery examples that could get you started - and it wouldnt be a huge issue to implement a CGridView that uses divs instead of a table, and uses cells inside columns, rather than cells inside rows.
I hope that helps a little.
I'm new here and I'm very new at programming but I need some serious hand-by-hand help here.
I was searching jquery and found a script to drag and drop stuff on the screen, basicly i just want to move some divs around, thats the easy part, the script I found has a callback function that writes onto the div that you just moved "dropped", this is exactly what I need but instead of writting dropped I want to save the 2 postion variables into a database (mysql), this is so that if I close the browser and open it again the div's will be on the last place I dropped them.
Can you help? Is there a jquery user interface with this already built in ?
I think this is easy to do with jquery ajax functions right? basicly I should send the serialized data (json right?) into a page that processes that data once its feed into it, then jason returns the handler with success or even with some output right?
It would be cool for the dragabble div to have a handler with last know position retrieve by jason from an external page that acts like a buffer to the database.
Is this the correct pipeline?
Best Regards
Joricam
you have kind of a vague question here, but I can try to help you get closer to the answer.
Imagine two sides of the puzzle:
When the page loads, the two (or more) DIVs are drawn on the screen. If you want them to draw in a specific order, you need to keep track of that in the database. So be sure your db has a field called something like display_order, and then display the DIVs in that order. (You can usually just add ORDER BY display_order to the SQL, so they are retrieved in the order you want, and then draw the DIVs right out in a loop.)
When someone drags and drops a DIV, you use AJAX/JSON/etc to tell your PHP script the new order. In this case, when that happens, rather than draw the word 'dropped' in the DIV, you should instead immediately update the display_order fields in the database. This way you are remembering each DIV's position.
Does that help/make sense?
UPDATED: thinking more about your question, here is the pseudo code:
in "display.php":
Fetch the contents for each DIV from the database, with ORDER BY display_order on the rows.
Draw them on the screen, looping through each database row.
Also in this HTML, use the jQuery script you already have to call another PHP script (dragged.php) when a row is dragged.
in "dragged.php":
This script is called when a row is dragged on the screen.
Currently it puts the word "dropped" in the DIV that is dragged. That's not helpful, so remove that.
Instead, you now know (from the variables passed to you) that a specific DIV needs to be in a specific place.
So grab a list of the DIVs from the database, then change the order of them (by altering the display_order column) based on the new position(s) you know.
Save that back to the database, so when display.php is called again next time, it draws the DIVs in the order you want.
Hope this helps explain further. If you are still struggling, I respectfully suggest you try to write the code, and post a more specific question about the part that you're stuck on. This will help you get a good answer quickly. (You may also want to Google this one a lot; I'm sure there are code samples out there showing how to do all this.)
Hey guys, there is a form where the user select some of his friends and I'm curious on how I can implement a list that searches simultaneously while the user is typing a friend's name and when he selects the name the name is written in the text box(jQuery). And if the user wants to select more than one friend, when I'm inserting the names in the database, how can I separate the names that are written in one input field?
You should take a look at the jquery auto-complete plugin:
http://docs.jquery.com/Plugins/autocomplete
Also, you could separate the names using commas.
Are you looking to write your own plugin or would you like to use an existing one?
If you want something ready made, here are a few examples
if you want something extremely light, only 6kb packed, this one would be the best choice
Autosuggest jQuery Plugin
Older one but still good
Tokenizing Autocomplete
This what already asked here on this site.
Facebook style JQuery autocomplete plugin
The accepted answer cited this jQuery code.
https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin
http://jqueryui.com/demos/autocomplete/
Although think twice about including the whole jquery ui library for this one plugin
I've implemented this a couple of times, it is not that difficult to achieve decent results and the basic idea that I used was...
1) create an input box.
2) create a div positioned directly underneath the input box.
3) create a jquery keypress handler. if there are more than x characters typed, ajax request.
4) loop through the results, and if they exist, append result divs to the result box.
5) show the result box.
I can dig up some example code if you would like. Not sure what you are talking about with the select multiple, but you could keep a variable of selected, and change the color of the result div when it is clicked on, this way many results can be selected and then processed later.
I have a php code that fetches data from mysql. The data has (say) 15 rows. I want to display only 5 rows at a time to the user, with links to each of the set (3 in this case) such that when a user clicks on either of the links, the same page will show the corresponding results. Since, php code has the final result set, I don't want a solution that involves me to navigate to other pages and possibly re-calculate the next set of solutions (5~10 or 10~15). How can I do this? Thanks in advance.
If I am using javascript or ajax, how can I achieve this? I don't know javascript much.
You can try loading everything in your page and simulating the pagination thanks to javascript.
An example in jQuery here
It sounds like you want to send the Data as a complete set to the client but not let him display everything to the user. So use Javascript to just show you the pages 1*page_number to 5*page_number (with a for-loop).
By far, the easiest solution in this situation is a Dom-based Grid system. I recommend checking out Datatables. In essence, the Datatables code will take a fully-formatted html table and reformat it to include only the amount of rows you tell it to, with paging on the bottom as you've requested. In addition, you can turn on such features as filtering, toggle-able length, sorting, and selection. Once you get the hang of it, the additional code takes no more than a minute per table and the features are outstanding.
This is really straightforward. Use PHP to output ALL of the table, with all the rows. The only gotcha here is to include the full html, including <thead> and <tbody> Give the table an id such as "example"
Now, include the files that you download from the datatables site--datatables.js and Jquery.js. Instantiate the jquery like this:
$(document).ready(function() {
$('#example').dataTable();
} );
That's it. As you can see from the examples, it's a really cool tool. Good luck.
I have an HTML table with contents, I would like to have an feature of Edit/Delete to that table. How do I do it with PHP?
I actually think that this sounds more like a job for JavaScript, which can edit/remove rows on-the-fly and with much less code. (Implement some AJAX too, and you can edit/remove rows in database too).
But if you insist on using PHP, you might just want to add some GET parameters to the Edit/Delete links that would delete or edit those rows.
Well, there is a pure PHP way to do it, and then there is a combination of Javascript and PHP. You must use PHP one way or another if you want your changes to the database to be permanent as that is your gateway to communicating with the database (as far as I know you cannot do that with Javascript as that is client-based and runs entirely in your web browser).
If using just PHP, you must generate HTML documents for each change. E.g., you click on one cell in the table and that gets you to a new HTML page where the field is editable through an input element; or you can list all fields at once for that row and edit them all at the same time. The fields are then posted in a form to a PHP page which will take the new values and update the database (or insert new values or however you wish it to behave). Here's a tutorial for how to do this:
http://www.freewebmasterhelp.com/tutorials/phpmysql/1
You can also mix in some Javascript which allows a more interactive interface to modifying the values in a cell. However, this obviously requires more code and may be overkill for what you're trying to do. Nonetheless, here is a link which demonstrates just that and also shows the code:
http://www.java2s.com/Code/JavaScript/GUI-Components/Editabletablecell.htm
Hope this is what you're looking for.
EDIT:
Forgot that you also wished to delete content in the table. That is also explained in the first link.
If you intend to work with databases, and it seems like you have little understanding of how they work, pick up a good book like: SQL - The Complete Reference. When you have enough knowledge of SQL, look at PHP's PDO extension: http://php.net/manual/en/book.pdo.php