自定義輸出結果

我的需求：

我們都知道datatable查詢資料後都是按照列一列一列的返回的，但是有時候我們雖然用到了datatable的表，卻不需要按列展示資料，我所要實現的是在查詢資料的時候按列從資料庫中查詢多個列的資料，但是展示在頁面上的時候把很多列的資料顯示在一列中，像下面圖片這樣：

我需要做的就是按列從資料庫中查詢標題、作者、URL、正文等內容，再自己組裝成上面的樣式。
下面是程式碼，我修改了ssp.class.php的輸出結果

實現程式碼：

    /**
     * Create the data output array for the DataTables rows
     *
     *  @param
 
  array $columns Column information array
     *  @param  array $data    Data from the SQL get
     *  @return array          Formatted data in a row based format
     */
    static function data_output( $columns, $data )
    {
        $out = array();
        $space = '       '
 
;
        $br = '<br>';
        //遍歷從伺服器取回來的資料
        for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
            $row = array();
            //遍歷列
            for ( $j=0, $jen=count($columns) ; $j<$jen ; $j++ ) {
                $column = $columns[$j];

                // Is there a formatter?
 

                if ( isset( $column['formatter'] ) ) {
                    $row[ $column['dt'] ] = $column['formatter']( $data[$i][ $column['db'] ], $data[$i] );
                }
                //$row[ $columns[0]['dt'] ]表示第一列，後面以此類推
                //$data[$i][ $columns[0]['db'] ]表示取回來的第一列的資料，後面以此類推
                //這裡我將結果拼接起來了
                else {
                    $row[ $columns[0]['dt'] ] = "<tr><td><h3 class='h5 font-w600 push-10'><a class='link-effect' href='javascript:showDetail(".$data[$i][ $columns[0]['db'] ].");'>".$data[$i][ $columns[1]['db'] ]."</a></h3>"."<div class='result_info article_info font-s12'>釋出時間 : ".$data[$i][ $columns[2]['db'] ].$space."作者 : <a href='' target='_blank'>".$data[$i][ $columns[3]['db'] ].$space."來源 : ".$data[$i][ $columns[4]['db'] ].$space."<a href='".$data[$i][ $columns[5]['db'] ]."'  target='_blank'>檢視原網頁</a></div><br><div id='txt_num' class='font-s13 text-muted hidden-xs' style='width: 100%; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;'>".$data[$i][ $columns[6]['db'] ]."</div></td></tr>".$br;
                    //我只需要第一列，所以後面的設定不顯示即可
                    $row[ $columns[1]['dt'] ] = "<td style='display:none'></td>";
                    $row[ $columns[2]['dt'] ] = "<td style='display:none'></td>";
                    $row[ $columns[3]['dt'] ] = "<td style='display:none'></td>";
                    $row[ $columns[4]['dt'] ] = "<td style='display:none'></td>";
                    $row[ $columns[5]['dt'] ] = "<td style='display:none'></td>";
                    $row[ $columns[6]['dt'] ] = "<td style='display:none'></td>";
                }
            }

            $out[] = $row;
        }

        return $out;
    }

排序&跳轉至指定頁面

我的需求：

datatable資料表本身就自帶了排序功能的，只要點選相應的列的列頭就可以對該列排序，但是我早已破壞了它該有的列結構，改成了我想要的只顯示一列的樣子。所以我在table外面新增幾個排序的按鈕，像下面圖片這樣：

點選相應的連結就會返回相應的排序結果。

實現原理就是給排序按鈕繫結一個點選事件，再傳入排序的引數。為什麼可以這樣呢？我只有一列資料了還是可以根據列排序？因為我在輸出的結果是多個列的拼接，所以那些列的資料都是存在的，伺服器在查詢資料的時候釋出時間的資料是在第1列，評論數量的資料是在第2列，所以我根據列的編號就能對該列的資料排序。

列的引數傳入後，在datatable初始化的時候一定要配置”sort”引數，他有兩個引數，一是要排序的列號即我用sort()函式傳的；二就是倒序還是正序的選項。

實現程式碼：

    //sort函式
    function sortBy(s) {
        var s = s;
        getAlldata(tableToUse,sort=s,order='desc');
    }
    //.
    //.
    //.
    //datatable的初始化函式
    function getAlldata(table,sort=0,order='desc') {
        $("#example").dataTable().fnDestroy();
        $('#example').DataTable( {
            "searchHighlight": true,
            "deferRender": true, //當處理大資料時，延遲渲染資料，有效提高Datatables處理能力   
            "processing": true,
            "serverSide": true,
            "iDisplayLength": 5,//單頁顯示條數
            "lengthMenu": [5, 10, 20, 50],//每頁顯示的條數選項
            "ajax": {
                url: 'info/ajax_server/'+table,
            },
            "order":[[sort,order]],//排序
            //新增跳轉至指定頁面的功能
            'fnDrawCallback': function(table) {    
                $("#example_paginate").append("<div style='display:inline-block;float:right;margin-top:15px;'>  跳轉到第 <input type='text' id='changePage' class='input-text' style='width:40px;height:22px'> 頁 <a class='btn btn-default shiny btn-sm' href='javascript:void(0);' id='dataTable-btn' style='text-align:center'>確認</a></div>");   
                var oTable = $("#example").dataTable();    
                $('#dataTable-btn').click(function(e) {    
                    if($("#changePage").val() && $("#changePage").val() > 0) {    
                        var redirectpage = $("#changePage").val() - 1;    
                    } else {    
                        var redirectpage = 0;    
                    }    
                    oTable.fnPageChange(redirectpage);    
                }); 
            }
        } );
    }