jQuery Datatable（V1.10.7） server side processing

时间：2021-08-14 14:22:26

 　　Datatable是jQuery一个强大的插件，详见https://www.datatables.net/，下面本人略总结在CodeIghiter框架的前端使用datatable的方法。

常用的配置选项：

根据数据源、性能要求可以配置各种配置项，下面列举几个常用的选项：

•aaData: js array数据源数组，格式可以是二维数组 [ [a,b,c],[d,e,f] ] 或json串数组（支持深度嵌套），后者需结合列定义的mData选项，指定目标数据；
•bDeferRender:延迟渲染模式，开始只生成当前页所需的DOM结构，可以极大提高加载速度（适用js array和ajax source数据源）；
•aaSorting:指定预设排序列，如需不需要预设排序可以指定为[]；
•bSortClasses： 排序操作时给对应列的单元格加上区分标记用的class，可以指定false以禁用，提高大数据量的排序操作；
•aLengthMenu,iDisplayLength,sPaginationType： 分页、页码相关配置项，较简单，可以参考官方API；
•oLanguage：语言包选项，可以分别指定各子语句翻译或赋值整个包对象（json串），也可以指定 sUrl 值通过ajax方式获取语言包文件（目前在我们的产品中，已全部改用直接赋值语言包对象，以避免一些请求被转向的异常情况）。

列定义选项：

•列定义（column）是Data Table配置中较重要也是较复杂的配置选项，主要涉及单元数据获取、排序、过滤等选项；
•列定义主要有2个参数：aoColumnDefs 和 aoColumns ，两者基本一致，区别在于aoColumnDefs可以指定作用的列，而aoColumns需要每列逐一配置，与table实际列数保持一致；
•mRender：与mData基本一样，但少了改变目标值的特性，主要用于区分处理TD值的显示、过滤、排序；
•bSearchable, bSortable：设置列可否过滤、排序；
•sClass：设置列样式class；

回调函数选项：

•fnDrawCallback：每次表格重画时回呼，包括翻页、排序、过滤都会触发此function，可以在此加入需要处理的操作；
•fnPreDrawCallback：每次表格重画前回呼，可以在触发翻页、排序等操作之前进行预处理。
 
view:

1.首先需要进行Datatables的一些基础配置：

  

　　“bServerSide”: true,

   “bProcessing”: true, //显示提示正在工作中

    “bPaginage”: true,

   “sPaginationType”: “two_buttons”,

 

2.“sAjaxSource” ：用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aoData）可以简单的提供一个可以用来获得资料url或者JSON对象，该对象必须包含aaData，作为表格的数据源。

  

<?PHP
    echo "\"sAjaxSource\": \"/xxxx/xxx/",";
?>

 

3.“fnServerData” ：此参数可以修改默认功能，从服务器获取数据（$.getJSON），这样更适合应用程序。

"fnServerData": function (sSource, aoData, fnCallback) {
        $.ajax
             ({
                  "dataType": "json",

                  "type": "POST",

                  "url": sSource,

                  "data": aoData,

                  "success": fnCallback

              });

},

 

4. 新版本Datatables与旧版本的不同:

1). “fnRender”: function (setting) { }                "mRender": function (data, type, row) { } ;

2). "sPaginationType“: “two_buttons” or “full_numbers”

– simple - 'Previous' and 'Next' buttons only
–simple_numbers - 'Previous' and 'Next' buttons, plus page numbers
–full - 'First', 'Previous', 'Next' and 'Last' buttons
–full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
 
 

5. "fnPreDrawCallback":  在每一个表格draw事件发生前调用该函数，通过返回false来取消draw事件其它任何的返回值，包括undefined都会导致draw事件的发生。

 

Controller:

Controller负责将把view传递过来的paging,sorting,searching的信息判断整理，通过model获取data list传送给view显示。

//Paging:

  $iDisplayStart = $this->input->get_post('iDisplayStart', true);

  $iDisplayLength = $this->input->get_post('iDisplayLength', true);

  if(isset($iDisplayStart) && $iDisplayLength != '-1')

        {
           $this->db->limit($this->db->escape_str($iDisplayLength),

      　　　$this->db->escape_str($iDisplayStart));

        }

//Ordering:

  $sTable = 'table_logs_event';

  $aColumns = array('id', 'ack', 'datetime', 'category', 'level', 'dev_mac', 'log_evt');

  $iSortCol_0 = $this->input->get_post('iSortCol_0', true);

  $iSortingCols = $this->input->get_post('iSortingCols', true);


if(isset($iSortCol_0))

        { for($j=0; $j<intval($iSortingCols); $j++)

            {   $iSortCol = $this->input->get_post('iSortCol_'.$j, true);

                $bSortable = $this->input->get_post('bSortable_'.intval($iSortCol), true);

                $sSortDir = $this->input->get_post('sSortDir_'.$j, true);

       if($bSortable == 'true')

          {  $this->db->order_by($aColumns[intval($this->db->escape_str($iSortCol))]  ,  

　　　　　　　 $this->db- >escape_str($sSortDir));   }

} }

//Filtering:

$sSearch = $this->input->get_post('sSearch', true);

 

if(isset($sSearch) && !empty($sSearch))

        { for($i=0; $i<count($aColumns); $i++)

            { $bSearchable = $this->input->get_post('bSearchable_'.$i, true);

              //单行排序

                if(isset($bSearchable) && $bSearchable == 'true')

                {  if ( $criteria == "unread" )

　　　　　　　　　　　　　　$this->db->or_like($aColumns[$i], $this->db->having('ack', 0)->escape_like_str($sSearch));

         　　　　　　else

                  　　　 $this->db->or_like($aColumns[$i], $this->db->escape_like_str($sSearch));

                } 
        } 
}

 

 Model:

Model负责从数据表获取Data list,以及所有需要显示的信息。

$this->db->select('SQL_CALC_FOUND_ROWS '.str_replace(' , ', ' ', implode(', ', $aColumns)), false);

        if ( $criteria == "unread" )

        {  $this->db->where('ack', 0);  }

        $query = $this->db->get($sTable);

        $this->db->select('FOUND_ROWS() AS found_rows');

        $iFilteredTotal = $this->db->get()->row()->found_rows;

        $iTotal = $this->db->count_all($sTable);

        $output = array(

            "sEcho" => intval($sEcho),   //页面传递用以标记的参数

            “iTotalRecords” => $iTotal,   //总的数据条数

            “iTotalDisplayRecords” => $iFilteredTotal,  //获取显示在页面上的数据条数

            “aaData” => array()    //获取data list

        );

 

  

 声明：任何转载请声明出处，并附上作者名与链接，否则将依法追究侵权责任。
标签：

相关文章