Skip to content

Commit

Permalink
examples added
Browse files Browse the repository at this point in the history
  • Loading branch information
Nuno committed Nov 21, 2016
1 parent 0caa35d commit 693d237
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 6 deletions.
16 changes: 12 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Include jupitern/table in your project, by adding it to your composer.json file.
## Usage
```php
// instance Table with instance name
\Jupitern\Table\Table::instance('dt_example')
\Jupitern\Table\Table::instance()

// set data for non ajax requests
// using a array
Expand All @@ -44,7 +44,7 @@ Include jupitern/table in your project, by adding it to your composer.json file.
['id' => 2, 'name' => 'John', 'age' => '44', 'phone' => '169 853 741'],
])
// using json string
->setData('[[1,"Peter","35","961 168 851"],[2,"John","44","169 853 741"]]')
->setData([[1,"Peter","35","961 168 851"],[2,"John","44","169 853 741"]])
// using PDO result or your framework ORM. see example how to grab $data at the end
->setData($data)

Expand Down Expand Up @@ -138,7 +138,7 @@ $data = $db->query("SELECT id, name, age, phone FROM persons")->fetchAll(PDO::FE
// used for column filter
$filterData = $db->query("SELECT name as val, name FROM persons limit 10")->fetchAll(PDO::FETCH_OBJ);

\Jupitern\Table\Table::instance('dt_example')
\Jupitern\Table\Table::instance()
->setData($data)
->attr('id', 'demoTable')
->attr('class', 'table table-bordered table-striped table-hover')
Expand Down Expand Up @@ -176,7 +176,7 @@ $filterData = $db->query("SELECT name as val, name FROM persons limit 10")->fetc
->render();
?>

Jquery and Datatables should be included.
Include Jquery, Datatables and Bootstrap (optional) in your html.

<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Expand All @@ -190,6 +190,14 @@ Jquery and Datatables should be included.
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('#demoTable').DataTable();
});
</script>

```

## Roadmap
Expand Down
4 changes: 2 additions & 2 deletions composer.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name" : "jupitern/table",
"description": "php table generation. integrates with your favourite orm and js library",
"keywords" : ["table generation", "framework", "ORM", "dataTables", "jQuery", "UI"],
"description": "HTML table generation for PHP. integrates with your favourite orm and js library",
"keywords" : ["PHP html table generation", "framework", "ORM", "dataTables", "jQuery", "UI"],
"homepage" : "https://github.com/jupitern/table",
"license" : "MIT",
"authors" : [
Expand Down
73 changes: 73 additions & 0 deletions src/Examples/test1.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<?php

require '../../vendor/autoload.php';

$table = \Jupitern\Table\Table::instance()
->setData([
['id' => 1, 'name' => 'Peter', 'age' => '35', 'phone' => '961 168 851'],
['id' => 2, 'name' => 'John', 'age' => '44', 'phone' => '169 899 742'],
['id' => 3, 'name' => 'Peter', 'age' => '22', 'phone' => '737 853 346'],
['id' => 4, 'name' => 'Clark', 'age' => '34', 'phone' => '169 574 741'],
['id' => 5, 'name' => 'Alex', 'age' => '65', 'phone' => '732 753 467'],
])
->attr('id', 'demoTable')
->attr('class', 'table table-bordered table-striped table-hover')
->attr('cellspacing', '0')
->attr('width', '100%')
->column()
->title('Name')
->value(function ($row) {
return rand(1,10)%2 ? '<b>'.$row['name'].'</b>' : $row['name'];
})
->css('color', 'green')
->css('width', '50%')
->css('background-color', '#ccc', true)
->add()
->column()
->title('Age')
->value('age')
->css('color', 'red')
->css('width', '20%')
->add()
->column('Phone')
->value('phone')
->css('color', 'red')
->css('width', '20%')
->add()
->column()
->value(function ($row) {
return '<a href="country/'. $row['id'] .'">edit</a>';
})
->css('width', '10%')
->add();
?>


<html>
<head>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- DATATABLES -->
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<!-- Bootstrap and Datatables Bootstrap theme (OPTIONAL) -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$('#demoTable').DataTable();
});

</script>
</head>
<body>
<div style="width: 50%; margin: 30px;">
<?php $table->render(); ?>
</div>
</body>
</html>
78 changes: 78 additions & 0 deletions src/Examples/test2.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<?php

require '../../vendor/autoload.php';

// grab data from db with PDO or in alternative from your framework ORM
$db = new PDO('mysql:host=HOST_NAME;dbname=DB_NAME;charset=utf8', 'DB_USERNAME', 'DB_PASSWORD',
array(PDO::ATTR_EMULATE_PREPARES => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)
);
// data to populate table
$data = $db->query("SELECT id, name, age, phone FROM persons")->fetchAll(PDO::FETCH_OBJ);
// used for column filter
$filterData = $db->query("SELECT name as val, name FROM persons limit 10")->fetchAll(PDO::FETCH_OBJ);

\Jupitern\Table\Table::instance()
->setData($data)
->attr('id', 'demoTable')
->attr('class', 'table table-bordered table-striped table-hover')
->attr('cellspacing', '0')
->attr('width', '100%')
->column()
->title('Name')
->value(function ($row) {
return rand(1,10)%2 ? '<b>'.$row['name'].'</b>' : $row['name'];
})
->filter($filterData)
->css('color', 'green')
->css('width', '50%')
->css('background-color', '#ccc', true)
->add()
->column()
->title('Age')
->value('age')
->filter()
->css('color', 'red')
->css('width', '20%')
->add()
->column('Phone')
->filter()
->value('phone')
->css('color', 'red')
->css('width', '20%')
->add()
->column()
->value(function ($row) {
return '<a href="country/'. $row['id'] .'">edit</a>';
})
->css('width', '10%')
->add()
?>

<html>
<head>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- DATATABLES -->
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<!-- Bootstrap and Datatables Bootstrap theme (OPTIONAL) -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$('#demoTable').DataTable();
});

</script>
</head>
<body>
<div style="width: 50%; margin: 30px;">
<?php $table->render(); ?>
</div>
</body>
</html>

0 comments on commit 693d237

Please sign in to comment.