Want To Add HTML To Server Side Script

Want To Add HTML To Server Side Script

gbyrdgbyrd Posts: 23Questions: 4Answers: 0

Hi,
I am using the server side script because I have a really large and growing database. I am just using the sample provided on the SS example.

In the ss-script it reads the following:
$columns = array(
array( 'db' => 'title', 'dt' => 0 ),
array( 'db' => 'url', 'dt' => 1 ),
array( 'db' => 'alias', 'dt' => 2 )
);

In the code above I am calling a title, a url, and an alias.

I want to wrap the title in a <p> tag, the url in an <a> tag an the alias also an an <a> tag.

I have tried everything I know to do without success. How can I accomplish this?

Thanks

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    You can do this client side with columns.render. See this example.

    Kevin

  • gbyrdgbyrd Posts: 23Questions: 4Answers: 0

    That looks interesting ... I will give it a go and see how it turns out

  • gbyrdgbyrd Posts: 23Questions: 4Answers: 0

    @kthorngren - this is not going to work. I am using the server-side script from this example: https://datatables.net/examples/server_side/simple.html

    I am getting the error "DataTables warning: table id=example - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1"

    Following the instructions on that page it appears that there is no Ajax data being returned. There are no errors in Dev Tools but the output on the page has "undefined" for every cell in every column.
    Note the image:

    I suspect there is something wrong with my js, but am not sure ..

    Basically here is what my code looks like

    Javascript:

     $(document).ready(function() {
        $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "/ss-script.php",
             columns: [
                {
                    className: 'title', 
                    data: 'title',
                    render: function(data, type) {
                        if (type === 'display') {
                            
                return '<strong class="title">' + data + '</strong> ';
                        }
     
                        return data;
                    }
                },
                
                {
                    className: 'url',
                    data: 'url',
                    render: function(data, type) {
                        if (type === 'display') {
                            
                return '<a href="' + data + '" class="url">' + data + '</a> ';
                        }
     
                        return data;
                    }
                },
                
                {
                    className: 'alias', 
                    data: 'alias',
                    render: function(data, type) {
                        if (type === 'display') {
                            
                return '<a href="' + data + '" class="alias">' + data + '</a> ';
                        }
     
                        return data;
                    }
                }
            ]
        });
    });
    

    Server Side PHP Script

    <?php
     
    /*
     * DataTables example server-side processing script.
     *
     * Please note that this script is intentionally extremely simple to show how
     * server-side processing can be implemented, and probably shouldn't be used as
     * the basis for a large complex system. It is suitable for simple use cases as
     * for learning.
     *
     * See http://datatables.net/usage/server-side for full details on the server-
     * side processing requirements of DataTables.
     *
     * @license MIT - http://datatables.net/license_mit
     */
     
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * Easy set variables
     */
     
    // DB table to use
    $table = 'links';
     
    // Table's primary key
    $primaryKey = 'id';
     
    // Array of database columns which should be read and sent back to DataTables.
    // The `db` parameter represents the column name in the database, while the `dt`
    // parameter represents the DataTables column identifier. In this case simple
    // indexes
    $columns = array(
        array( 'db' => 'title', 'dt' => 0 ),
        array( 'db' => 'url',  'dt' => 1 ),
        array( 'db' => 'alias', 'dt' => 2 )
    );
     
    // SQL server connection information
    $sql_details = array(
        'user' => 'xxx',
        'pass' => '*xxx',
        'db'   => 'xxx',
        'host' => 'localhost'
    );
     
     
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * If you just want to use the basic configuration for DataTables with PHP
     * server-side, there is no need to edit below this line.
     */
     
    require( 'ssp.class.php' );
     
    echo json_encode(
        SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
    );
    

    HTML is

    <table id="example" class="display" style="width:100%">
       <thead>
          <tr>
             <th>Title</th>
             <th>Domain</th>
             <th>Alias</th>                         
          </tr>
       </thead>
       <tfoot>
          <tr>
             <th>Title</th>
             <th>Domain</th>
             <th>Alias</th>
          </tr>
       </tfoot>
    </table>
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    That seems odd that you would have an empty Ajax response but the table is populated with data - even though its not correct. What happens if you remove/comment out the render functions?

    The Invalid JSON Response error wouldn't be caused by your JS. You can use the browser's debugger or console.log(data) statements to see what the data is for one or more of the render functions.

    Kevin

This discussion has been closed.