Original Source
https://pdocrud.com/demo/pages/skin-options
https://pdocrud.com/demo/pages/template-selection
https://pdocrud.com/demo/pages/table-column-attr
https://pdocrud.com/demo/pages/enqueue-css-js
https://pdocrud.com/demo/pages/on-hover
Apply Differnt Skins
$pdocrud = new PDOCrud();
//You can apply different theme css simply by adding css in the skins folder. By default,
//five css (default, dark, fair,green and advanced) are present. By default, default.css is applied.
$pdocrud->setSkin("green");
echo $pdocrud->dbTable("orders")->render();
Pure Bootstrap - Added in v3.0
$pdocrud = new PDOCrud();
// You need to set template name and sking name 'pure' in settings page
// It can be done directly in config page also
$pdocrud = new PDOCrud(false, "pure", "pure");// or you can set template name and skin name as pure in constructor.
echo $pdocrud->dbTable("orders")->render();
On Hover
hover effect is particularly useful when you have large number of columns in grid/table. Due to large number of columns, it shows the scroll if the data doesn't fit. You need to horizontal scroll to reach to action buttons. Using hover css, you won't need to scroll because on hover, it will show the action button directly. We have created a skin named "hover", you will either need to use this skin or you can directly use the css shown below to achieve this effect
$pdocrud = new PDOCrud();
$pdocrud->setSkin("hover");//add this skin to show hover effect
echo $pdocrud->dbTable("products")->render();
//Or you can add below css in your style file
.pdocrud-table-container table tr.pdocrud-header-row th{
padding: 9px 15px;
}
.pdocrud-table tbody tr.pdocrud-data-row{
height: 50px;
}
.pdocrud-table tbody tr.pdocrud-data-row:hover td.pdocrud-row-actions{
position: absolute;
right: 0;
border-left: none;
margin-top: 0;
border-top: 1px solid #000;
}
.pdocrud-table tbody tr.pdocrud-data-row:hover td{
background: #000;
color: #fff;
}
Add css and js Settings
$pdocrud = new PDOCrud();
$pdocrud->enqueueJs("googlemap", "http://maps.googleapis.com/maps/api/js");//name of js and path of js
$pdocrud->enqueueCSS("jquery.mobile", "https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css");//name of css and path of css
echo $pdocrud->dbTable("users")->render();
Column Attributes and Style
$pdocrud = new PDOCrud();
$pdocrud->colDataAttr( "customer_name", array("width"=>"70px","colspan"=>2));
echo $pdocrud->dbTable("orders")->render();
