Displaying database table row values using a scroll-able table in html

Question

UPDATE: I just realized that I'm too noob for javascript and jquery, thanks for answering my questions! How do I close this question?

I'm using PHP and MYSQL for the database, I want to display my database's row values to a but the thing is what if I have like 1000 rows, it'll be really useful If there is a table that doesn't expand as your data floods it with details but instead gives you a scroll option to view the other rows. Please help me, I really have no idea how to do it...

I do know how to connect to my database and to output it but I don't know how to make a table that is scroll-able and does not expand but instead gives you scroll just like a browser...

<?php

mysql_connect('localhost','root','');
mysql_select_db('database');

$query = 'SELECT * FROM table';
$result = mysql_query($query);

while($row = mysql_fetch_array($result)){
echo $row['name'],' ',$row['lastn'],'<br>';
}

?>

You need some JavaScript for that. Have a look at JQuery and Datatable. — Stefan P
– Stefan P, Commented Feb 24, 2015 at 17:22
i don't understand the difference between javascript and php, i mean the both of them can use and declare functions, can't i just use php instead of javascript? — Miko Chu
– Miko Chu, Commented Feb 24, 2015 at 17:26
PHP is executed on the server. JavaScript is executed on clientside. What you need is a client side (browser side) solution, if you want a scrollable table. — Stefan P
– Stefan P, Commented Feb 24, 2015 at 17:31

Guilherme Assemany · Accepted Answer · 2015-02-24 17:42:23Z

2

Hello!

Use DataTables to accomplish this easily.

First, initialize your table with jQuery:

$(document).ready(function() {
$('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "..phpFileAjaxReturn.php"
} );

} );

In this file "phpFileAjaxReturn.php", you should use PHP to make a SELECT on your database and return the values.

You should use echo json_encode( $output ); to send the Data Correctly to the Table.

Look at these links:

https://legacy.datatables.net/examples/data_sources/server_side.html https://datatables.net/examples/api/tabs_and_scrolling.html

edited Feb 24, 2015 at 17:42

answered Feb 24, 2015 at 17:27

Guilherme Assemany

6866 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

tjd Over a year ago

You may want to put the actual answer into your post & use the link only for support.

Miko Chu Over a year ago

thanks for that but this javascript and jquery to me is something new and it's confusing me a lot, is there any video that can show me how to use that?

Guilherme Assemany Over a year ago

Well... If you want to be a web developer, javascript is very, very important for almost everything. Have a look at this link that lists the bests websites to learn code online. hongkiat.com/blog/sites-to-learn-coding-online <-- Most of them have javascript and jQuery lessons. Its a good start.

Miko Chu Over a year ago

upvoted! thanks for the help! but for now i'll just use a simple <table>, i'll study jquery and javascript first then tackle this topic again for maybe after a very long time, thanks really appreciated it!

Miko Chu Over a year ago

@Guilherme, thanks for that source materials! I'll study it right away.

|

Collectives™ on Stack Overflow

Displaying database table row values using a scroll-able table in html

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related