datatable的自定义配置-输出结果&排序&跳转指定页码
来源:互联网 发布:java 汉字字符长度 编辑:程序博客网 时间:2024/05/17 22:02
自定义输出结果
我的需求:
我们都知道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); }); } } ); }
0 0
- datatable的自定义配置-输出结果&排序&跳转指定页码
- datatable指定页码分页
- hive自定义函数 将查询统计结果输出到指定的jdbc数据源
- DataTable跳转到指定页
- mysql 用指定ID号排序输出结果
- 页码跳转
- jQuery datatable 跳转至指定页
- PHP+MySQL 输入页码跳转到指定页
- js中跳转页码的方式
- flash打印指定页码的报表
- Word2007页码自定义开始页面,生成指定级别目录
- DataTable插件指定某列不可排序
- iterator 的遍历 循环输出数字,页码
- 自定义datatable 的列
- p180冒泡排序的完整程序及输出结果
- 输出起泡排序算法每趟的结果
- c# linq排序后的结果输出到一个对象
- DataTable删除指定的内容
- php foreach
- 数据结构之vector
- IntelliJ IDEA13.1.3+Scala2.11.1环境搭建
- 快速排序
- 实现zXing二维码连续扫描
- datatable的自定义配置-输出结果&排序&跳转指定页码
- iOS NSPredicate 详解
- Jquery操作table
- flex布局
- android开发环境遇到的一些问题
- LeetCode算法题目:Longest Substring Without Repeating Characters
- ajax解析success返回的对象json字符串
- windows socket简单编程示例
- 网站统计中的数据收集原理及实现