In Progress

Create advanced table functionality in Javascript - repost

Please use the datatables framework ([url removed, login to view]) to solve the following. Your solution should not require any browser plugin, and work in the latest versions of Firefox and Chrome.

I need a page with two tables next to each other. The tables should have four columns each with sample data of types date, decimal, text, integer. If one presses the header of a column, the table should get sorted by this column ascending. Pressing it twice will sort the column decending, and three times means that the table will no longer be sorted by this column. It should also be possible to sort by multiple columns.

It should be possible to "link" a row from one table to a row in another. The way to do this is to "draw" a line between the two rows. The line should be green. It should be possible to link in a many-to-many relationship. The integer column in the tables is an "ID" column and it is the ids that should be stored in the code. In a later project, these links will be stored in a database, so please document carefully in the code, in which variables these links are stored.

It should be possible to select a "link" and press the delete button to remove it.

The two tables should scroll independently. The lines between the linked rows should show correctly when scrolling or using the zoom feature in the browser (if you cannot get this to work with the zoom feature, then please implement your own zoom feature to be used if the user has a small screen). They should also show correctly if the user sorts the tables by a different column.

The tables should fill the entire screen on all resolutions.

Please create a check box in the top right corner, which if checked will remove all rows that have been linked to other rows and continue to do this if the user links new rows.

It should be possible for the user to edit the cells in the table on the left in a way similar to a spreadsheet, where the cursor is inside the cell. If a boolean in the code is true, this edition functionality should be turned off so the user cannot edit any cells.

Please provide your [url removed, login to view] username in your bid. You need to push your code to a [url removed, login to view] repository I will create for you, to solve this project. You can expect many more projects if you complete this one.

Skills: AJAX, CakePHP, HTML5, Javascript, jQuery / Prototype

See more: chrome api spreadsheet, www linked in com, www linked in, where can i get javascript, types of sorts, true green, spreadsheet javascript, spreadsheet in javascript, spreadsheet api javascript, scrolling table, javascript edit code, javascript ajax framework, continue line in c, ajax javascript framework, ajax framework javascript, advanced c# net, repository means, javascript to edit page, javascript page edit, javascript draw line, edit page javascript, table top, spreadsheet API, javascript three, github page

About the Employer:
( 165 reviews ) Copenhagen, Denmark

Project ID: #4126509

Awarded to:


Really Interesting project here. I would love to work on it.

$120 USD in 7 days
(2 Reviews)