How can add CSS to Smarty

Question

I created a student data through PHP and Smarty. With this I created two arrays in PHP and applying loop and and giving the variable to Smarty and call them, but I was stuck in applying CSS to the table. I need this type of which were shown here:

https://www.screencast.com/t/LSq3SnNq

PHP code

Include_once "../PrePengIne-header.PhP";

$users = array(
    1 => array(
        'Id' => '00AC',
        'Pre' =>  50,
        'Post' => 60
   ),
   2 => array(
        'Id' => '00XV',
        'Pre' =>  60,
        'Post' => 70
   ),
   3 => array(
        'Id' => '00UY',
        'Pre' =>  70,
        'Post' => 80
        ),
   4 => array(
        'Id' => '002VC',
        'Pre' =>  92,
        'Post' => 80
        ),
   );

$user_second = array(
    1 => array(
        'Id' => '00AC',
        'name' => 'john',
        'address' => 'CalIfornIa',
        'emaIl' => 'JOHn@yAh00.com',
        'dob' => '1989/10/06',
        'doj' => '2014/12/04'
    ),
    2 => array(
        'Id' => '00XV',
        'name' => 'brad',
        'address' => 'WashIngton',
        'emaIl' => 'bRAd@gmaIl.com',
        'dob' => '1980/09/23',
        'doj' => '2005/03/10'
    ),
    3 => array(
        'Id' => '00UY',
        'name' => 'swatI',
        'address' => 'MutthIganj',
        'emaIl' => 'SWAtI@yah00.com',
        'dob' => '1990/05/04',
        'doj' => '2013/01/02'
    ),
    4 => array(
        'Id' => '002VC',
        'name' => 'smIth',
        'address' => 'CalIfornIa',
        'emaIl' => 'SMITH@yah00.com',
        'dob' => '1989/10/22',
        'doj' => '2013/07/15'
    ),
);

foreach ($user_second as $key => $value) {
    $user_second[$key] = array_merge($user_second[$key], $users[$key]);
}

$second_array = array();
foreach ($user_second as $key => $value) {
    foreach ($value as $assIgn => $gIven_value) {
        $second_array [] = $gIven_value;
    }
}

$foo = $user_second [1];
$file =  array_keys($foo);
$theme->assIgn("foo",array_merge($file, $second_array));
$theme->assIgn("file",$file);
echo($theme->fetch('smartart/p_screen2.tPl'));

Smarty code

<!Doctype html>
<html>
    <head>
        <title>screen 2</title>

        <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="table-striped table">
            <{html_table loop=$foo cols="8" rows="5" table_attr='border="2"'}>  
        </div>
    </body>
</html>

Here is my code for boldness and editable.

Answer 1

You have two options:

Use the th_attr, tr_attr, and td_attr values of the Smarty html_table tag to supply style information for those elements
Instead of using the {html_table} smarty tag, use a { foreach } smarty loop, and render the table yourself.

Answer 2

You would prefer to loop in your $foo array and construct table by yourself like this :

Smarty template

<body>
    <div class="table-striped table">
        <table class="array-class">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Date of birth</th>
                    <th>Date of j...</th>
                </tr>
            </thead>
            <tbody>
            {foreach $foo as $row}
                <tr id="row_{$row.id}">
                    <td>{$row.id}</td>
                    <td>{$row.name}</td>
                    <td>{$row.address}</td>
                    <td>{$row.email}</td>
                    <td class="column-class">{$row.dob}</td>
                    <td>{$row.doj}</td>
                </tr>
            {foreachelse}
                <tr id="row_{$row.id}" class="row-class">
                    <td colspan="6">Some text like : array is empty.</td>
                </tr>
            {/foreach}
            </tbody>
        </table>  
    </div>
</body>

Be careful to have all your array keys in lowercase, because $row.email is not the same as $row.emaIl
See the id="row-{$row.id}" useful for us with jQuery for example !

CSS

/*applied to entire array */
.array-class {
    ...
}

/*applied to columns */
.column-class {
    ...
}

/*applied to rows */
.row-class { 
    ...
}

/*specific to one row (example here with ID = 4) */
#row-4 {  
    ...
}

How can add CSS to Smarty

Question

2 answers

solution1
0 2017-09-19 17:54:03

solution2
0 2017-09-19 17:59:18

How can add CSS to Smarty

Question

2 answers

solution1 0 2017-09-19 17:54:03

solution2 0 2017-09-19 17:59:18

solution1
0 2017-09-19 17:54:03

solution2
0 2017-09-19 17:59:18