前台展示基本完工`

.gitignore

@@ -0,0 +1,2 @@
+/2.5
+/nbproject/private/

assets/css/app.css

@@ -1 +1,27 @@
-/* Write your styles */
+/* Write your styles */
+.am-table th {line-height: 35px !important;}
+.am-table th span{display: none;}
+.am-table th select{border: none;  height: 100%;width: 100%; min-width: 90px;}
+.am-table th .dsearch{border: none; color: #000; width: 100%; background-color:#FFF;}
+.am-tabs-bd {
+  -moz-user-select: text !important;
+  -webkit-user-select: text !important;
+  -ms-user-select: text !important;
+  user-select: text !important;
+}
+.am-table td .fonts{
+  min-width:280px;
+  max-width: 95%;
+  display: block;
+  overflow:hidden;
+  white-space:nowrap; 
+  text-overflow:ellipsis; 
+  text-overflow: ellipsis;/* IE/Safari */ 
+  -ms-text-overflow: ellipsis; 
+  -o-text-overflow: ellipsis;/* Opera */ 
+  -moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/ 
+}
+.am-table .fontsbody{
+  max-width: 95%;
+  white-space: normal;
+}

assets/js/amazeui.datatables.js

@@ -0,0 +1,227 @@
+/*! DataTables Amaze UI 2.x integration */
+
+/**
+ * DataTables integration for  Amaze UI 2.x. This requires  Amaze UI 2.x and
+ * DataTables 1.10 or newer.
+ */
+
+'use strict';
+
+var $ = require('jquery');
+var DataTable = require('datatables');
+
+// language
+// https://github.com/DataTables/Plugins/blob/master/i18n/Chinese.lang
+DataTable.defaults.oLanguage = {
+  sProcessing:   "处理中...",
+  sLengthMenu:   "显示 _MENU_ 项结果",
+  sZeroRecords:  "没有匹配结果",
+  sInfo:         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
+  sInfoEmpty:    "显示第 0 至 0 项结果，共 0 项",
+  sInfoFiltered: "(由 _MAX_ 项结果过滤)",
+  sInfoPostFix:  "",
+  sSearch:       "搜索：",
+  sUrl:          "",
+  sEmptyTable:     "表中数据为空",
+  sLoadingRecords: "载入中...",
+  sInfoThousands:  ",",
+  oPaginate: {
+    sFirst:    "首页",
+    sPrevious: "上页",
+    sNext:     "下页",
+    sLast:     "末页"
+  },
+  oAria: {
+    sSortAscending:  ": 以升序排列此列",
+    sSortDescending: ": 以降序排列此列"
+  }
+};
+
+// Set the defaults for DataTables initialisation
+// https://datatables.net/reference/option/dom
+$.extend(true, DataTable.defaults, {
+  dom: "<'am-g am-datatable-hd'<'am-u-sm-6'l><'am-u-sm-6'f>>" +
+  "<'am-g'<'am-u-sm-12'tr>>" +
+  "<'am-g am-datatable-footer'<'am-u-sm-5'i><'am-u-sm-7'p>>",
+  renderer: 'amazeui'
+});
+
+
+/* Default class modification */
+$.extend(DataTable.ext.classes, {
+  /* Features */
+  sWrapper: 'dataTables_wrapper am-datatable am-form-inline dt-amazeui',
+  sFilter: 'dataTables_filter am-datatable-filter',
+  sFilterInput: 'am-form-field am-input-sm',
+  sInfo: 'dataTables_info am-datatable-info',
+  sPaging: 'dataTables_paginate paging_', /* Note that the type is postfixed */
+  sLength: 'dataTables_length am-form-group am-datatable-length',
+  sLengthSelect: 'am-form-select am-input-sm',
+  sProcessing: "dataTables_processing",
+
+  /* Sorting */
+  sSortAsc: "sorting_asc",
+  sSortDesc: "sorting_desc",
+  sSortable: "sorting", /* Sortable in both directions */
+  sSortableAsc: "sorting_asc_disabled",
+  sSortableDesc: "sorting_desc_disabled",
+  sSortableNone: "sorting_disabled",
+  sSortColumn: "sorting_" /* Note that an int is postfixed for the sorting order */
+});
+
+
+
+/* Amaze UI paging button renderer */
+DataTable.ext.renderer.pageButton.amazeui = function(settings, host, idx, buttons, page, pages) {
+  var api = new DataTable.Api(settings);
+  var classes = settings.oClasses;
+  var lang = settings.oLanguage.oPaginate;
+  var btnDisplay, btnClass, counter = 0;
+
+  var attach = function(container, buttons) {
+    var i, ien, node, button;
+    var clickHandler = function(e) {
+      e.preventDefault();
+      if (!$(e.currentTarget).hasClass('am-disabled')) {
+        api.page(e.data.action).draw(false);
+      }
+    };
+
+    for (i = 0, ien = buttons.length; i < ien; i++) {
+      button = buttons[i];
+
+      if ($.isArray(button)) {
+        attach(container, button);
+      }
+      else {
+        btnDisplay = '';
+        btnClass = '';
+
+        switch (button) {
+          case 'ellipsis':
+            btnDisplay = '&hellip;';
+            btnClass = 'am-disabled';
+            break;
+
+          case 'first':
+            btnDisplay = lang.sFirst;
+            btnClass = button + (page > 0 ?
+                '' : ' am-disabled');
+            break;
+
+          case 'previous':
+            btnDisplay = lang.sPrevious;
+            btnClass = button + (page > 0 ?
+                '' : ' am-disabled');
+            break;
+
+          case 'next':
+            btnDisplay = lang.sNext;
+            btnClass = button + (page < pages - 1 ?
+                '' : ' am-disabled');
+            break;
+
+          case 'last':
+            btnDisplay = lang.sLast;
+            btnClass = button + (page < pages - 1 ?
+                '' : ' am-disabled');
+            break;
+
+          default:
+            btnDisplay = button + 1;
+            btnClass = page === button ?
+              'am-active' : '';
+            break;
+        }
+
+        if (btnDisplay) {
+          node = $('<li>', {
+            'class': classes.sPageButton + ' ' + btnClass,
+            'id': idx === 0 && typeof button === 'string' ?
+            settings.sTableId + '_' + button :
+              null
+          })
+            .append($('<a>', {
+              'href': '#',
+              'aria-controls': settings.sTableId,
+              'data-dt-idx': counter,
+              'tabindex': settings.iTabIndex
+            })
+              .html(btnDisplay)
+          )
+            .appendTo(container);
+
+          settings.oApi._fnBindAction(
+            node, {action: button}, clickHandler
+          );
+
+          counter++;
+        }
+      }
+    }
+  };
+
+  // IE9 throws an 'unknown error' if document.activeElement is used
+  // inside an iframe or frame.
+  var activeEl;
+
+  try {
+    // Because this approach is destroying and recreating the paging
+    // elements, focus is lost on the select button which is bad for
+    // accessibility. So we want to restore focus once the draw has
+    // completed
+    activeEl = $(document.activeElement).data('dt-idx');
+  } catch (e) {
+  }
+
+  attach(
+    $(host).empty().
+      html('<ul class="am-datatable-pager am-pagination am-pagination-right am-text-sm"/>').
+      children('ul'),
+    buttons
+  );
+
+  if (activeEl) {
+    $(host).find('[data-dt-idx=' + activeEl + ']').focus();
+  }
+};
+
+
+/*
+ * TableTools Amaze UI compatibility
+ * Required TableTools 2.1+
+ */
+if (DataTable.TableTools) {
+  // Set the classes that TableTools uses to something suitable for Bootstrap
+  $.extend(true, DataTable.TableTools.classes, {
+    container: "DTTT am-btn-group",
+    buttons: {
+      normal: "am-btn am-btn-default",
+      disabled: "am-disabled"
+    },
+    collection: {
+      container: "DTTT_dropdown dropdown-menu",
+      buttons: {
+        normal: "",
+        disabled: "am-disabled"
+      }
+    },
+    print: {
+      info: "DTTT_print_info"
+    },
+    select: {
+      row: "am-active"
+    }
+  });
+
+  // Have the collection use a bootstrap compatible drop down
+  $.extend(true, DataTable.TableTools.DEFAULTS.oTags, {
+    collection: {
+      container: "ul",
+      button: "li",
+      liner: "a"
+    }
+  });
+}
+
+module.exports = DataTable;

assets/js/dataTables.responsive.js

@@ -0,0 +1,873 @@
+ /*! Responsive 1.0.6
+   * 2014-2015 SpryMedia Ltd - datatables.net/license
+   */
+
+/**
+ * @summary     Responsive
+ * @description Responsive tables plug-in for DataTables
+ * @version     1.0.6
+ * @file        dataTables.responsive.js
+ * @author      SpryMedia Ltd (www.sprymedia.co.uk)
+ * @contact     www.sprymedia.co.uk/contact
+ * @copyright   Copyright 2014-2015 SpryMedia Ltd.
+ *
+ * This source file is free software, available under the following license:
+ *   MIT license - http://datatables.net/license/mit
+ *
+ * This source file is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
+ *
+ * For details please refer to: http://www.datatables.net
+ */
+
+(function(window, document, undefined) {
+
+
+  var factory = function( $, DataTable ) {
+    "use strict";
+
+    /**
+     * Responsive is a plug-in for the DataTables library that makes use of
+     * DataTables' ability to change the visibility of columns, changing the
+     * visibility of columns so the displayed columns fit into the table container.
+     * The end result is that complex tables will be dynamically adjusted to fit
+     * into the viewport, be it on a desktop, tablet or mobile browser.
+     *
+     * Responsive for DataTables has two modes of operation, which can used
+     * individually or combined:
+     *
+     * * Class name based control - columns assigned class names that match the
+     *   breakpoint logic can be shown / hidden as required for each breakpoint.
+     * * Automatic control - columns are automatically hidden when there is no
+     *   room left to display them. Columns removed from the right.
+     *
+     * In additional to column visibility control, Responsive also has built into
+     * options to use DataTables' child row display to show / hide the information
+     * from the table that has been hidden. There are also two modes of operation
+     * for this child row display:
+     *
+     * * Inline - when the control element that the user can use to show / hide
+     *   child rows is displayed inside the first column of the table.
+     * * Column - where a whole column is dedicated to be the show / hide control.
+     *
+     * Initialisation of Responsive is performed by:
+     *
+     * * Adding the class `responsive` or `dt-responsive` to the table. In this case
+     *   Responsive will automatically be initialised with the default configuration
+     *   options when the DataTable is created.
+     * * Using the `responsive` option in the DataTables configuration options. This
+     *   can also be used to specify the configuration options, or simply set to
+     *   `true` to use the defaults.
+     *
+     *  @class
+     *  @param {object} settings DataTables settings object for the host table
+     *  @param {object} [opts] Configuration options
+     *  @requires jQuery 1.7+
+     *  @requires DataTables 1.10.1+
+     *
+     *  @example
+     *      $('#example').DataTable( {
+ *        responsive: true
+ *      } );
+     *    } );
+     */
+    var Responsive = function ( settings, opts ) {
+      // Sanity check that we are using DataTables 1.10 or newer
+      if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.1' ) ) {
+        throw 'DataTables Responsive requires DataTables 1.10.1 or newer';
+      }
+
+      this.s = {
+        dt: new DataTable.Api( settings ),
+        columns: []
+      };
+
+      // Check if responsive has already been initialised on this table
+      if ( this.s.dt.settings()[0].responsive ) {
+        return;
+      }
+
+      // details is an object, but for simplicity the user can give it as a string
+      if ( opts && typeof opts.details === 'string' ) {
+        opts.details = { type: opts.details };
+      }
+
+      this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
+      settings.responsive = this;
+      this._constructor();
+    };
+
+    Responsive.prototype = {
+      /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+       * Constructor
+       */
+
+      /**
+       * Initialise the Responsive instance
+       *
+       * @private
+       */
+      _constructor: function ()
+      {
+        var that = this;
+        var dt = this.s.dt;
+
+        dt.settings()[0]._responsive = this;
+
+        // Use DataTables' private throttle function to avoid processor thrashing
+        $(window).on( 'resize.dtr orientationchange.dtr', dt.settings()[0].oApi._fnThrottle( function () {
+          that._resize();
+        } ) );
+
+        // Destroy event handler
+        dt.on( 'destroy.dtr', function () {
+          $(window).off( 'resize.dtr orientationchange.dtr draw.dtr' );
+        } );
+
+        // Reorder the breakpoints array here in case they have been added out
+        // of order
+        this.c.breakpoints.sort( function (a, b) {
+          return a.width < b.width ? 1 :
+            a.width > b.width ? -1 : 0;
+        } );
+
+        // Determine which columns are already hidden, and should therefore
+        // remain hidden. todo - should this be done? See thread 22677
+        //
+        // this.s.alwaysHidden = dt.columns(':hidden').indexes();
+
+        this._classLogic();
+        this._resizeAuto();
+
+        // Details handler
+        var details = this.c.details;
+        if ( details.type ) {
+          that._detailsInit();
+          this._detailsVis();
+
+          dt.on( 'column-visibility.dtr', function () {
+            that._detailsVis();
+          } );
+
+          // Redraw the details box on each draw. This is used until
+          // DataTables implements a native `updated` event for rows
+          dt.on( 'draw.dtr', function () {
+            dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
+              var row = dt.row( idx );
+
+              if ( row.child.isShown() ) {
+                var info = that.c.details.renderer( dt, idx );
+                row.child( info, 'child' ).show();
+              }
+            } );
+          } );
+
+          $(dt.table().node()).addClass( 'dtr-'+details.type );
+        }
+
+        // First pass - draw the table for the current viewport size
+        this._resize();
+      },
+
+
+      /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+       * Private methods
+       */
+
+      /**
+       * Calculate the visibility for the columns in a table for a given
+       * breakpoint. The result is pre-determined based on the class logic if
+       * class names are used to control all columns, but the width of the table
+       * is also used if there are columns which are to be automatically shown
+       * and hidden.
+       *
+       * @param  {string} breakpoint Breakpoint name to use for the calculation
+       * @return {array} Array of boolean values initiating the visibility of each
+       *   column.
+       *  @private
+       */
+      _columnsVisiblity: function ( breakpoint )
+      {
+        var dt = this.s.dt;
+        var columns = this.s.columns;
+        var i, ien;
+
+        // Class logic - determine which columns are in this breakpoint based
+        // on the classes. If no class control (i.e. `auto`) then `-` is used
+        // to indicate this to the rest of the function
+        var display = $.map( columns, function ( col ) {
+          return col.auto && col.minWidth === null ?
+            false :
+            col.auto === true ?
+              '-' :
+            $.inArray( breakpoint, col.includeIn ) !== -1;
+        } );
+
+        // Auto column control - first pass: how much width is taken by the
+        // ones that must be included from the non-auto columns
+        var requiredWidth = 0;
+        for ( i=0, ien=display.length ; i<ien ; i++ ) {
+          if ( display[i] === true ) {
+            requiredWidth += columns[i].minWidth;
+          }
+        }
+
+        // Second pass, use up any remaining width for other columns. For
+        // scrolling tables we need to subtract the width of the scrollbar. It
+        // may not be requires which makes this sub-optimal, but it would
+        // require another full redraw to make complete use of those extra few
+        // pixels
+        var scrolling = dt.settings()[0].oScroll;
+        var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
+        var widthAvailable = dt.table().container().offsetWidth - bar;
+        var usedWidth = widthAvailable - requiredWidth;
+
+        // Control column needs to always be included. This makes it sub-
+        // optimal in terms of using the available with, but to stop layout
+        // thrashing or overflow. Also we need to account for the control column
+        // width first so we know how much width is available for the other
+        // columns, since the control column might not be the first one shown
+        for ( i=0, ien=display.length ; i<ien ; i++ ) {
+          if ( columns[i].control ) {
+            usedWidth -= columns[i].minWidth;
+          }
+        }
+
+        // Allow columns to be shown (counting from the left) until we run out
+        // of room
+        var empty = false;
+        for ( i=0, ien=display.length ; i<ien ; i++ ) {
+          if ( display[i] === '-' && ! columns[i].control ) {
+            // Once we've found a column that won't fit we don't let any
+            // others display either, or columns might disappear in the
+            // middle of the table
+            if ( empty || usedWidth - columns[i].minWidth < 0 ) {
+              empty = true;
+              display[i] = false;
+            }
+            else {
+              display[i] = true;
+            }
+
+            usedWidth -= columns[i].minWidth;
+          }
+        }
+
+        // Determine if the 'control' column should be shown (if there is one).
+        // This is the case when there is a hidden column (that is not the
+        // control column). The two loops look inefficient here, but they are
+        // trivial and will fly through. We need to know the outcome from the
+        // first , before the action in the second can be taken
+        var showControl = false;
+
+        for ( i=0, ien=columns.length ; i<ien ; i++ ) {
+          if ( ! columns[i].control && ! columns[i].never && ! display[i] ) {
+            showControl = true;
+            break;
+          }
+        }
+
+        for ( i=0, ien=columns.length ; i<ien ; i++ ) {
+          if ( columns[i].control ) {
+            display[i] = showControl;
+          }
+        }
+
+        // Finally we need to make sure that there is at least one column that
+        // is visible
+        if ( $.inArray( true, display ) === -1 ) {
+          display[0] = true;
+        }
+
+        return display;
+      },
+
+
+      /**
+       * Create the internal `columns` array with information about the columns
+       * for the table. This includes determining which breakpoints the column
+       * will appear in, based upon class names in the column, which makes up the
+       * vast majority of this method.
+       *
+       * @private
+       */
+      _classLogic: function ()
+      {
+        var that = this;
+        var calc = {};
+        var breakpoints = this.c.breakpoints;
+        var columns = this.s.dt.columns().eq(0).map( function (i) {
+          var className = this.column(i).header().className;
+
+          return {
+            className: className,
+            includeIn: [],
+            auto:      false,
+            control:   false,
+            never:     className.match(/\bnever\b/) ? true : false
+          };
+        } );
+
+        // Simply add a breakpoint to `includeIn` array, ensuring that there are
+        // no duplicates
+        var add = function ( colIdx, name ) {
+          var includeIn = columns[ colIdx ].includeIn;
+
+          if ( $.inArray( name, includeIn ) === -1 ) {
+            includeIn.push( name );
+          }
+        };
+
+        var column = function ( colIdx, name, operator, matched ) {
+          var size, i, ien;
+
+          if ( ! operator ) {
+            columns[ colIdx ].includeIn.push( name );
+          }
+          else if ( operator === 'max-' ) {
+            // Add this breakpoint and all smaller
+            size = that._find( name ).width;
+
+            for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
+              if ( breakpoints[i].width <= size ) {
+                add( colIdx, breakpoints[i].name );
+              }
+            }
+          }
+          else if ( operator === 'min-' ) {
+            // Add this breakpoint and all larger
+            size = that._find( name ).width;
+
+            for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
+              if ( breakpoints[i].width >= size ) {
+                add( colIdx, breakpoints[i].name );
+              }
+            }
+          }
+          else if ( operator === 'not-' ) {
+            // Add all but this breakpoint (xxx need extra information)
+
+            for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
+              if ( breakpoints[i].name.indexOf( matched ) === -1 ) {
+                add( colIdx, breakpoints[i].name );
+              }
+            }
+          }
+        };
+
+        // Loop over each column and determine if it has a responsive control
+        // class
+        columns.each( function ( col, i ) {
+          var classNames = col.className.split(' ');
+          var hasClass = false;
+
+          // Split the class name up so multiple rules can be applied if needed
+          for ( var k=0, ken=classNames.length ; k<ken ; k++ ) {
+            var className = $.trim( classNames[k] );
+
+            if ( className === 'all' ) {
+              // Include in all
+              hasClass = true;
+              col.includeIn = $.map( breakpoints, function (a) {
+                return a.name;
+              } );
+              return;
+            }
+            else if ( className === 'none' || className === 'never' ) {
+              // Include in none (default) and no auto
+              hasClass = true;
+              return;
+            }
+            else if ( className === 'control' ) {
+              // Special column that is only visible, when one of the other
+              // columns is hidden. This is used for the details control
+              hasClass = true;
+              col.control = true;
+              return;
+            }
+
+            $.each( breakpoints, function ( j, breakpoint ) {
+              // Does this column have a class that matches this breakpoint?
+              var brokenPoint = breakpoint.name.split('-');
+              var re = new RegExp( '(min\\-|max\\-|not\\-)?('+brokenPoint[0]+')(\\-[_a-zA-Z0-9])?' );
+              var match = className.match( re );
+
+              if ( match ) {
+                hasClass = true;
+
+                if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
+                  // Class name matches breakpoint name fully
+                  column( i, breakpoint.name, match[1], match[2]+match[3] );
+                }
+                else if ( match[2] === brokenPoint[0] && ! match[3] ) {
+                  // Class name matched primary breakpoint name with no qualifier
+                  column( i, breakpoint.name, match[1], match[2] );
+                }
+              }
+            } );
+          }
+
+          // If there was no control class, then automatic sizing is used
+          if ( ! hasClass ) {
+            col.auto = true;
+          }
+        } );
+
+        this.s.columns = columns;
+      },
+
+
+      /**
+       * Initialisation for the details handler
+       *
+       * @private
+       */
+      _detailsInit: function ()
+      {
+        var that    = this;
+        var dt      = this.s.dt;
+        var details = this.c.details;
+
+        // The inline type always uses the first child as the target
+        if ( details.type === 'inline' ) {
+          details.target = 'td:first-child';
+        }
+
+        // type.target can be a string jQuery selector or a column index
+        var target   = details.target;
+        var selector = typeof target === 'string' ? target : 'td';
+
+        // Click handler to show / hide the details rows when they are available
+        $( dt.table().body() ).on( 'click', selector, function (e) {
+          // If the table is not collapsed (i.e. there is no hidden columns)
+          // then take no action
+          if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
+            return;
+          }
+
+          // Check that the row is actually a DataTable's controlled node
+          if ( ! dt.row( $(this).closest('tr') ).length ) {
+            return;
+          }
+
+          // For column index, we determine if we should act or not in the
+          // handler - otherwise it is already okay
+          if ( typeof target === 'number' ) {
+            var targetIdx = target < 0 ?
+            dt.columns().eq(0).length + target :
+              target;
+
+            if ( dt.cell( this ).index().column !== targetIdx ) {
+              return;
+            }
+          }
+
+          // $().closest() includes itself in its check
+          var row = dt.row( $(this).closest('tr') );
+
+          if ( row.child.isShown() ) {
+            row.child( false );
+            $( row.node() ).removeClass( 'parent' );
+          }
+          else {
+            var info = that.c.details.renderer( dt, row[0] );
+            row.child( info, 'child' ).show();
+            $( row.node() ).addClass( 'parent' );
+          }
+        } );
+      },
+
+
+      /**
+       * Update the child rows in the table whenever the column visibility changes
+       *
+       * @private
+       */
+      _detailsVis: function ()
+      {
+        var that = this;
+        var dt = this.s.dt;
+
+        // Find how many columns are hidden
+        var hiddenColumns = dt.columns().indexes().filter( function ( idx ) {
+          var col = dt.column( idx );
+
+          if ( col.visible() ) {
+            return null;
+          }
+
+          // Only counts as hidden if it doesn't have the `never` class
+          return $( col.header() ).hasClass( 'never' ) ? null : idx;
+        } );
+        var haveHidden = true;
+
+        if ( hiddenColumns.length === 0 || ( hiddenColumns.length === 1 && this.s.columns[ hiddenColumns[0] ].control ) ) {
+          haveHidden = false;
+        }
+
+        if ( haveHidden ) {
+          // Show all existing child rows
+          dt.rows( { page: 'current' } ).eq(0).each( function (idx) {
+            var row = dt.row( idx );
+
+            if ( row.child() ) {
+              var info = that.c.details.renderer( dt, row[0] );
+
+              // The renderer can return false to have no child row
+              if ( info === false ) {
+                row.child.hide();
+              }
+              else {
+                row.child( info, 'child' ).show();
+              }
+            }
+          } );
+        }
+        else {
+          // Hide all existing child rows
+          dt.rows( { page: 'current' } ).eq(0).each( function (idx) {
+            dt.row( idx ).child.hide();
+          } );
+        }
+      },
+
+
+      /**
+       * Find a breakpoint object from a name
+       * @param  {string} name Breakpoint name to find
+       * @return {object}      Breakpoint description object
+       */
+      _find: function ( name )
+      {
+        var breakpoints = this.c.breakpoints;
+
+        for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
+          if ( breakpoints[i].name === name ) {
+            return breakpoints[i];
+          }
+        }
+      },
+
+
+      /**
+       * Alter the table display for a resized viewport. This involves first
+       * determining what breakpoint the window currently is in, getting the
+       * column visibilities to apply and then setting them.
+       *
+       * @private
+       */
+      _resize: function ()
+      {
+        var dt = this.s.dt;
+        var width = $(window).width();
+        var breakpoints = this.c.breakpoints;
+        var breakpoint = breakpoints[0].name;
+        var columns = this.s.columns;
+        var i, ien;
+
+        // Determine what breakpoint we are currently at
+        for ( i=breakpoints.length-1 ; i>=0 ; i-- ) {
+          if ( width <= breakpoints[i].width ) {
+            breakpoint = breakpoints[i].name;
+            break;
+          }
+        }
+
+        // Show the columns for that break point
+        var columnsVis = this._columnsVisiblity( breakpoint );
+
+        // Set the class before the column visibility is changed so event
+        // listeners know what the state is. Need to determine if there are
+        // any columns that are not visible but can be shown
+        var collapsedClass = false;
+        for ( i=0, ien=columns.length ; i<ien ; i++ ) {
+          if ( columnsVis[i] === false && ! columns[i].never ) {
+            collapsedClass = true;
+            break;
+          }
+        }
+
+        $( dt.table().node() ).toggleClass('collapsed', collapsedClass );
+
+        dt.columns().eq(0).each( function ( colIdx, i ) {
+          dt.column( colIdx ).visible( columnsVis[i] );
+        } );
+      },
+
+
+      /**
+       * Determine the width of each column in the table so the auto column hiding
+       * has that information to work with. This method is never going to be 100%
+       * perfect since column widths can change slightly per page, but without
+       * seriously compromising performance this is quite effective.
+       *
+       * @private
+       */
+      _resizeAuto: function ()
+      {
+        var dt = this.s.dt;
+        var columns = this.s.columns;
+
+        // Are we allowed to do auto sizing?
+        if ( ! this.c.auto ) {
+          return;
+        }
+
+        // Are there any columns that actually need auto-sizing, or do they all
+        // have classes defined
+        if ( $.inArray( true, $.map( columns, function (c) { return c.auto; } ) ) === -1 ) {
+          return;
+        }
+
+        // Clone the table with the current data in it
+        var tableWidth   = dt.table().node().offsetWidth;
+        var columnWidths = dt.columns;
+        var clonedTable  = dt.table().node().cloneNode( false );
+        var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
+        var clonedBody   = $( dt.table().body().cloneNode( false ) ).appendTo( clonedTable );
+
+        $( dt.table().footer() ).clone( false ).appendTo( clonedTable );
+
+        // This is a bit slow, but we need to get a clone of each row that
+        // includes all columns. As such, try to do this as little as possible.
+        dt.rows( { page: 'current' } ).indexes().flatten().each( function ( idx ) {
+          var clone = dt.row( idx ).node().cloneNode( true );
+
+          if ( dt.columns( ':hidden' ).flatten().length ) {
+            $(clone).append( dt.cells( idx, ':hidden' ).nodes().to$().clone() );
+          }
+
+          $(clone).appendTo( clonedBody );
+        } );
+
+        var cells = dt.columns().header().to$().clone( false );
+        $('<tr/>')
+          .append( cells )
+          .appendTo( clonedHeader );
+
+        // In the inline case extra padding is applied to the first column to
+        // give space for the show / hide icon. We need to use this in the
+        // calculation
+        if ( this.c.details.type === 'inline' ) {
+          $(clonedTable).addClass( 'dtr-inline collapsed' );
+        }
+
+        var inserted = $('<div/>')
+          .css( {
+            width: 1,
+            height: 1,
+            overflow: 'hidden'
+          } )
+          .append( clonedTable );
+
+        // Remove columns which are not to be included
+        inserted.find('th.never, td.never').remove();
+
+        inserted.insertBefore( dt.table().node() );
+
+        // The cloned header now contains the smallest that each column can be
+        dt.columns().eq(0).each( function ( idx ) {
+          columns[idx].minWidth = cells[ idx ].offsetWidth || 0;
+        } );
+
+        inserted.remove();
+      }
+    };
+
+
+    /**
+     * List of default breakpoints. Each item in the array is an object with two
+     * properties:
+     *
+     * * `name` - the breakpoint name.
+     * * `width` - the breakpoint width
+     *
+     * @name Responsive.breakpoints
+     * @static
+     */
+    Responsive.breakpoints = [
+      { name: 'desktop',  width: Infinity },
+      { name: 'tablet-l', width: 1024 },
+      { name: 'tablet-p', width: 768 },
+      { name: 'mobile-l', width: 480 },
+      { name: 'mobile-p', width: 320 }
+    ];
+
+
+    /**
+     * Responsive default settings for initialisation
+     *
+     * @namespace
+     * @name Responsive.defaults
+     * @static
+     */
+    Responsive.defaults = {
+      /**
+       * List of breakpoints for the instance. Note that this means that each
+       * instance can have its own breakpoints. Additionally, the breakpoints
+       * cannot be changed once an instance has been creased.
+       *
+       * @type {Array}
+       * @default Takes the value of `Responsive.breakpoints`
+       */
+      breakpoints: Responsive.breakpoints,
+
+      /**
+       * Enable / disable auto hiding calculations. It can help to increase
+       * performance slightly if you disable this option, but all columns would
+       * need to have breakpoint classes assigned to them
+       *
+       * @type {Boolean}
+       * @default  `true`
+       */
+      auto: true,
+
+      /**
+       * Details control. If given as a string value, the `type` property of the
+       * default object is set to that value, and the defaults used for the rest
+       * of the object - this is for ease of implementation.
+       *
+       * The object consists of the following properties:
+       *
+       * * `renderer` - function that is called for display of the child row data.
+       *   The default function will show the data from the hidden columns
+       * * `target` - Used as the selector for what objects to attach the child
+       *   open / close to
+       * * `type` - `false` to disable the details display, `inline` or `column`
+       *   for the two control types
+       *
+       * @type {Object|string}
+       */
+      details: {
+        renderer: function ( api, rowIdx ) {
+          var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
+            var header = $( api.column( cell.column ).header() );
+            var idx = api.cell( cell ).index();
+
+            if ( header.hasClass( 'control' ) || header.hasClass( 'never' ) ) {
+              return '';
+            }
+
+            // Use a non-public DT API method to render the data for display
+            // This needs to be updated when DT adds a suitable method for
+            // this type of data retrieval
+            var dtPrivate = api.settings()[0];
+            var cellData = dtPrivate.oApi._fnGetCellData(
+              dtPrivate, idx.row, idx.column, 'display'
+            );
+            var title = header.find('span').text()?header.find('span').text():header.text();
+            if ( title ) {
+              title = title + ':';
+            }
+
+            return '<li data-dtr-index="'+idx.column+'">'+
+              '<span class="dtr-title">'+
+              title+
+              '</span> '+
+              '<span class="dtr-data">'+
+              cellData+
+              '</span>'+
+              '</li>';
+          } ).toArray().join('');
+
+          return data ?
+            $('<ul data-dtr-index="'+rowIdx+'"/>').append( data ) :
+            false;
+        },
+
+        target: 0,
+
+        type: 'inline'
+      }
+    };
+
+
+    /*
+     * API
+     */
+    var Api = $.fn.dataTable.Api;
+
+// Doesn't do anything - work around for a bug in DT... Not documented
+    Api.register( 'responsive()', function () {
+      return this;
+    } );
+
+    Api.register( 'responsive.index()', function ( li ) {
+      li = $(li);
+
+      return {
+        column: li.data('dtr-index'),
+        row:    li.parent().data('dtr-index')
+      };
+    } );
+
+    Api.register( 'responsive.rebuild()', function () {
+      return this.iterator( 'table', function ( ctx ) {
+        if ( ctx._responsive ) {
+          ctx._responsive._classLogic();
+        }
+      } );
+    } );
+
+    Api.register( 'responsive.recalc()', function () {
+      return this.iterator( 'table', function ( ctx ) {
+        if ( ctx._responsive ) {
+          ctx._responsive._resizeAuto();
+          ctx._responsive._resize();
+        }
+      } );
+    } );
+
+
+    /**
+     * Version information
+     *
+     * @name Responsive.version
+     * @static
+     */
+    Responsive.version = '1.0.6';
+
+
+    $.fn.dataTable.Responsive = Responsive;
+    $.fn.DataTable.Responsive = Responsive;
+
+// Attach a listener to the document which listens for DataTables initialisation
+// events so we can automatically initialise
+    $(document).on( 'init.dt.dtr', function (e, settings, json) {
+      if ( e.namespace !== 'dt' ) {
+        return;
+      }
+
+      if ( $(settings.nTable).hasClass( 'responsive' ) ||
+        $(settings.nTable).hasClass( 'dt-responsive' ) ||
+        settings.oInit.responsive ||
+        DataTable.defaults.responsive
+      ) {
+        var init = settings.oInit.responsive;
+
+        if ( init !== false ) {
+          new Responsive( settings, $.isPlainObject( init ) ? init : {}  );
+        }
+      }
+    } );
+
+    return Responsive;
+  }; // /factory
+
+
+// Define as an AMD module if possible
+  if ( typeof define === 'function' && define.amd ) {
+    define( ['jquery', 'datatables'], factory );
+  }
+  else if ( typeof exports === 'object' ) {
+    // Node/CommonJS
+    factory( require('jquery'), require('datatables') );
+  }
+  else if ( jQuery && !jQuery.fn.dataTable.Responsive ) {
+    // Otherwise simply initialise as normal, stopping multiple evaluation
+    factory( jQuery, jQuery.fn.dataTable );
+  }
+
+
+})(window, document);

data/item0.txt

@@ -4,7 +4,7 @@
     "data": [
         {
             "name": "Adobe Dreamweaver CC 2016",
-            "body": "这个是软件简介",
+            "body": "这个是软件简介,我要介绍一下啊!件简介,我要介绍一下啊!件简介,我要介绍一下啊!件简介,我要介绍一下啊!件简介,我要介绍一下啊!件简介,我要介绍一下啊!件简介,我要介绍一下啊!件简介,我要介绍一下啊!件简介,我要介绍一下啊!件简介,我要介绍一下啊!",
             "other": "这个是其他信息",
             "type": "网页设计",
             "url": {

index.php

@@ -1,6 +1,6 @@
 <?php
-for ($i=0; $i < 4; $i++) { 
-  $items[$i] = json_decode(file_get_contents("data/item".$i.".txt"));
+for ($i = 0; $i < 4; $i++) {
+	$items[$i] = json_decode(file_get_contents("data/item" . $i . ".txt"));
 }
 ?>
 <!doctype html>
@@ -8,10 +8,11 @@ for ($i=0; $i < 4; $i++) {
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="">
-    <meta name="keywords" content="">
+	<meta http-equiv="Content-Language" content="zh-CN" />
+    <meta name="keywords" content="破解软件,绿色软件,汉化软件,注册机,KEY">
+	<meta name="description" content="软件云集是追风逐雨博客作者自用软件的一个软件下载集合,只为自身使用方便,无盈利,无恶意,如有侵权,请发送邮件到:shileiye@qq.com.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>软件云集- 追风逐雨</title>
+    <title>软件云集 - 追风逐雨</title>
 
     <!-- Set render engine for 360 browser -->
     <meta name="renderer" content="webkit">
@@ -28,7 +29,7 @@ for ($i=0; $i < 4; $i++) {
     <!-- Add to homescreen for Safari on iOS -->
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
+    <meta name="apple-mobile-web-app-title" content="软件云集"/>
     <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
 
     <!-- Tile icon for Win8 (144x144 + tile color) -->
@@ -58,7 +59,7 @@ for ($i=0; $i < 4; $i++) {
           <i class="am-header-icon am-icon-bars"></i>
         </a>
       </div>
-      <h1 class="am-header-title">
+      <h1 class="am-header-title" data-am-smooth-scroll="{position: 0}">
         <a href="#title-link" class="">
           软件云集
         </a>
@@ -69,63 +70,70 @@ for ($i=0; $i < 4; $i++) {
         </a>
       </div>
     </header>
-    
+
     <div id="left-link" class="am-offcanvas">
       <div class="am-offcanvas-bar">
         <div class="am-offcanvas-content">
           <p>
-            这是追风逐雨博主自用软件的集合<br/>
-            初衷只为方便博主<br/>
-            以后如何以后再说
+            软件云集是追风逐雨博客作者自用软件的一个软件下载集合,只为自身使用方便,无盈利,无恶意.<br/>
+			如有侵权,请发送邮件到:shileiye@qq.com.<br/>
           </p>
         </div>
       </div>
     </div>
-    
+
     <div data-am-widget="tabs" class="am-tabs am-tabs-default">
       <ul class="am-tabs-nav am-cf">
-      <?php for ($i = 0; $i < count($items); $i++) { ?>
-        <li class="<?php if($i==0) {echo 'am-active'; } ?>"><a href="[data-tab-panel-<?php echo $i ?>]"><?php echo $items[$i]->title; ?></a></li>
-      <?php } ?>
+		<?php for ($i = 0; $i < count($items); $i++) { ?>
+			<li class="<?php
+			if ($i == 0) {
+				echo 'am-active';
+			}
+			?>"><a href="[data-tab-panel-<?php echo $i ?>]"><?php echo $items[$i]->title; ?></a></li>
+			<?php } ?>
       </ul>
       <div class="am-tabs-bd">
-      <?php for ($i = 0; $i < count($items); $i++) { ?>
-        <div data-tab-panel-<?php echo $i ?> class="am-tab-panel <?php if($i==0) {echo 'am-active'; } ?>">
-          <table width="100%" class="am-table am-table-striped am-table-bordered am-table-compact am-text-nowrap" id="<?php echo $items[$i]->title; ?>">
-            <thead>
-              <tr>
-                <th>软件名称</th>
-                <th>日期</th>
-                <th>分类</th>
-                <th>介绍</th>
-                <th>下载</th>
-              </tr>
-            </thead>
-            <tbody>
-            <?php foreach ($items[$i]->data as $key) { ?>
-              <tr>
-                <td><?php echo $key->name; ?></td>
-                <td class="center"><?php echo $key->times; ?></td>
-                <td><?php echo $key->type; ?></td>
-                <td><?php echo $key->body; ?></td>
-                <td class="center">
-                <?php if(isset($key->url->baidu) && $key->url->baidu != '') { ?>
-                  <a href="<?php echo $key->url->baidu; ?>" class="am-btn am-btn-success am-radius am-btn-xs"><i class="am-icon-cloud-download"></i> 百度网盘</a> 
-                <?php } ?>
-                <?php if(isset($key->url->s360) && $key->url->s360 != '') { ?>
-                  <a href="<?php echo $key->url->s360; ?>" class="am-btn am-btn-success am-radius am-btn-xs"><i class="am-icon-cloud-download"></i> 360网盘</a> 
-                <?php } ?>
-                <?php if(isset($key->url->local) && $key->url->local != '') { ?>
-                  <a href="<?php echo $key->url->local; ?>" class="am-btn am-btn-warning am-radius am-btn-xs"><i class="am-icon-download"></i> 本地下载</a>
-                <?php } ?>
-                </td>
-                
-              </tr>
-            <?php } ?>
-            </tbody>
-          </table>
-        </div>
-      <?php } ?>
+		<?php for ($i = 0; $i < count($items); $i++) { ?>
+			<div data-tab-panel-<?php echo $i ?> class="am-tab-panel <?php
+			if ($i == 0) {
+				echo 'am-active';
+			}
+			?>">
+			  <table width="100%" class="am-table am-table-striped am-table-bordered am-table-compact am-text-nowrap" id="<?php echo $items[$i]->title; ?>">
+				<thead>
+				  <tr>
+					<th><span>软件名称(点击搜索)</span></th>
+					<th><span>日期</span></th>
+					<th><span>分类</span></th>
+					<th>介绍</th>
+					<th>下载</th>
+				  </tr>
+				</thead>
+				<tbody>
+				  <?php foreach ($items[$i]->data as $key) { ?>
+					  <tr>
+						<td><span class="fonts"><?php echo $key->name; ?></span></td>
+						<td class="center"><?php echo $key->times; ?></td>
+						<td class="center"><span class="am-badge am-badge-primary am-round am-text-sm"><?php echo $key->type; ?><span</td>
+						<td><span class="fontsbody"><?php echo $key->body; ?></span></td>
+						<td class="center">
+						  <?php if (isset($key->url->baidu) && $key->url->baidu != '') { ?>
+							  <a href="<?php echo $key->url->baidu; ?>" class="am-btn am-btn-success am-radius am-btn-xs"><i class="am-icon-cloud-download"></i> 百度网盘</a> 
+						  <?php } ?>
+						  <?php if (isset($key->url->s360) && $key->url->s360 != '') { ?>
+							  <a href="<?php echo $key->url->s360; ?>" class="am-btn am-btn-success am-radius am-btn-xs"><i class="am-icon-cloud-download"></i> 360网盘</a> 
+						  <?php } ?>
+						  <?php if (isset($key->url->local) && $key->url->local != '') { ?>
+							  <a href="<?php echo $key->url->local; ?>" class="am-btn am-btn-warning am-radius am-btn-xs"><i class="am-icon-download"></i> 本地下载</a>
+						  <?php } ?>
+						</td>
+
+					  </tr>
+				  <?php } ?>
+				</tbody>
+			  </table>
+			</div>
+		<?php } ?>
       </div>
     </div>
     <!-- 页面内容结束-->
@@ -143,30 +151,83 @@ for ($i=0; $i < 4; $i++) {
     <script src="assets/js/amazeui.datatables.min.js"></script>
     <script src="assets/js/dataTables.responsive.min.js"></script>
     <script>
-      jQuery.extend(jQuery.fn.dataTableExt.oSort, {
-        "chinese-string-asc": function (s1, s2) {
-          return s1.localeCompare(s2);
-        },
-        "chinese-string-desc": function (s1, s2) {
-          return s2.localeCompare(s1);
-        }
-      });
-      //$('#example').DataTable();
-
-      $('<?php for ($i = 0; $i < count($items); $i++) { echo ($i==0) ? '#'.$items[$i]->title : ', #'.$items[$i]->title; }?>').DataTable({
-        responsive: true,
-        paging: false,
-        dom: 't',
-        order: [[1, 'desc'], [2, 'asc']],
-        columnDefs: [
-          {type: 'chinese-string', targets: '2'},
-          {targets: [0,3,4], orderable: false}
-          //{targets: 2, visible: false}
-        ]
-      });
-      $(function () {
-        $('#download-tabs').tabs();
-      })
+        //支持中文排序
+        jQuery.extend(jQuery.fn.dataTableExt.oSort, {
+          "chinese-string-asc": function (s1, s2) {
+            return s1.localeCompare(s2);
+          },
+          "chinese-string-desc": function (s1, s2) {
+            return s2.localeCompare(s1);
+          }
+        });
+
+        //表格样式
+        var table = $('<?php
+		for ($i = 0; $i < count($items); $i++) {
+			echo ($i == 0) ? '#' . $items[$i]->title : ', #' . $items[$i]->title;
+		}
+		?>').DataTable({
+          responsive: true, //忘了
+          paging: false, //不显示分页
+          dom: 't', //显示元件
+          searching: true, //本地搜索
+          order: [[1, 'desc'], [2, 'asc']], //按时间和分类排序
+          columnDefs: [
+            {type: 'chinese-string', targets: '2'}, //第二列中文排序
+            {targets: [0, 3, 4], orderable: false}, //034禁用排序
+            {targets: [4], bSearchable: false}	//4禁用检索
+          ],
+          //列筛选
+          initComplete: function () {
+            var api = this.api();
+            api.columns().indexes().flatten().each(function (i) {
+              if (i != 0 && i != 3 && i != 4) {	//034不添加筛选
+                var column = api.column(i);
+                //var $span = $('<span class="addselect">▾</span>').appendTo($(column.header()))
+                var wenzi = column.header().firstChild.innerHTML;
+                var select = $('<select><option value="">全部' + wenzi + '</option></select>')
+                        .appendTo($(column.header()))
+                        .on('change click', function (evt) {
+                          evt.stopPropagation();
+                          var val = $.fn.dataTable.util.escapeRegex($(this).val());
+                          column.search(val ? '^' + val + '$' : '', true, false).draw();
+                        });
+                column.data().unique().sort().each(function (d, j) {
+                  function delHtmlTag(str) {
+                    return str.replace(/<[^>]+>/g, "");//去掉html标签
+                  }
+
+                  d = delHtmlTag(d)
+                  select.append('<option value="' + d + '">' + d + '</option>')
+                  //$span.append(select)
+                });
+              }
+			  if (i == 0) {	//添加搜索框
+                var column = api.column(i);
+				var wenzi = column.header().firstChild.innerHTML;
+                var search = $('<input type="text" class="am-form-field am-radius dsearch" placeholder="' + wenzi + '"/>').appendTo($(column.header()))
+				.on('keyup click', function (evt) {
+                          evt.stopPropagation();
+                          var val = $.fn.dataTable.util.escapeRegex($(this).val());
+                          //column.search(val ? '^' + val + '$' : '', true, false).draw();
+						  column.search(val, true, false).draw();
+                        });
+				//column.header().append(search);
+              }
+            });
+          }
+        });
+/*
+        //自定义搜索
+        $('.dsearch').on('keyup click', function () {
+          var tsval = $(".dsearch").val()
+          table.search(tsval, false, false).draw();
+        });
+*/
+        //标签切换
+        $(function () {
+          $('#download-tabs').tabs({noSwipe:0});
+        })
     </script>
   </body>
 </html>