datatable的自定义配置-输出结果&排序&跳转指定页码

自定义输出结果

我的需求：

我们都知道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);    
                }); 
            }
        } );
    }