使用jquery切换到表格视图和集合视图

在同一页面中，我必须根据用户的选择给出表格和集合视图。对于使用jQuery数据表插件的表格。收集视图我使用Ajax函数从服务器获取HTML数据。什么是创建此切换部分而不加载整个事物的最佳方式，但是根据用户的选择加载数据。使用jquery切换到表格视图和集合视图

这些是我使用的开关按钮

<div class="btn-group"> 
    <a href="#" id="list" class="btn btn-default btn-sm"><i class='glyphicon glyphicon-th-list'></i> Table</a> 
    <a href="#" id="grid" class="btn btn-default btn-sm"><i class='glyphicon glyphicon-th'></i> Grid</a> 
</div>

数据表生成

<div class="box-body table-responsive"> 
    <?php 
    echo $this->table->generate(); 
    ?> 
</div> 

var oTable = $('#big_table').dataTable({ 
    "bProcessing": true, 
    "bPaginate": true, 
    "bLengthChange": true, 
    "bFilter": true, 
    "bSort": true, 
    "bInfo": true, 
    "bAutoWidth": false, 
    "bServerSide": true, 
    "sAjaxSource": '<?php echo base_url(); ?>products/datatable', 
    "bJQueryUI": false, 
    "iDisplayStart ": 20, 
    "oLanguage": { 
     "sProcessing": "<img src='<?php echo base_url(); ?>assets/images/ajax-loader_dark.GIF' style='margin-left:20px;'>" 
    }, 
    "fnInitComplete": function() { 
     //oTable.fnAdjustColumnSizing(); 
    }, 
    'fnServerData': function (sSource, aoData, fnCallback) { 
     $.ajax 
     ({ 
      'dataType': 'json', 
      'type': 'POST', 
      'url': sSource, 
      'data': aoData, 
      'success': fnCallback 
     }); 
    } 
});

集合视图生成

<div id="pageData"></div> 

$.ajax({ 
    type: "POST", 
    url: "<?php echo base_url('paginate/pagination'); ?>", 
    data: dataString, 
    cache: false, 
    success: function(result){ 
     //closeModal(); 
     $("#pageData").html(result); 
    } 
});

enter image description here

来源

2014-09-05 Dushan

没有人知道这样做是对CSS ??? – Dushan 2014-09-05 05:43:23

可以让它变成小提琴吗？或者你可以澄清你正在寻找改变对齐方式，而点击桌子上应该内容来表。同时点击网格，内容应该出现在网格中？ – 2014-09-05 06:09:18

@punithasubramaniv无法在小提琴中创建精确的场景。我想要的是，当我点击网格我想显示集合视图，我正在通过Ajax。当我点击列表时，我想将表格渲染到div并隐藏集合视图。 – Dushan 2014-09-05 06:34:46

Somthi像这样，你可以试试吗？我只是用相同的价值观

test.php的

SCRIPT

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script> 
    $(function() { 
     $('button').click(function(){ 
      var idButton=$(this).attr('id'); 
      $.ajax({ 
       type: "POST", 
       url: "test.php", 
       data: "layout="+idButton, 
       cache: false, 
       success: function(html) {  
        $('body').html(html); 
       } 
      }); 
     }); 
    }); 
    </script>

HTML

<div> 
     <button id="1">TABLE</button> 
     <button id="2">GRID</button> 
    </div>

PHP

<?php if(isset($_POST['layout'])) { 
    if($_POST['layout']=="1"){ ?> 
    <style> 
     .display-view 
     { 
      display:table; 
      width:100%; 
     } 
     .display-row, 
     { 
      display:table-row; 
     } 
     .display-row > div 
     { 
      display: table-cell; 
      border:1px solid #000; 
     } 
     .display-name 
     { 
      text-align:right; 
     } 
     .display-type,.display-name{ 
      width:50px; 
     } 
    </style> 
    <?php } else { ?> 
    <style> 
     .display-view{ 
      border:1px solid #f00; 
      border-radius:2px; 
      box-shadow:2px 2px 2px #fff; 
      display:block; 
      height:500px; 
      padding:50px; 

     } 
     .display-row{ 
     float:left; 
     margin-left:10px; 
     } 
     .display-type{ 
     background-color:#ccc; 
     color:#fff; 
     width:200px; 
     height:200px; 
     } 
    </style> 
    <?php } ?> 
     <div class="display-view"> 
      <div class="display-row"> 
       <div class="display-type">Product 1</div> 
       <div class="display-name">Product 2 </div>     
      </div> 
      <div class="display-row"> 
       <div class="display-type">value 1</div> 
       <div class="display-name">value 2</div>     
      </div>  
      <div class="display-row"> 
       <div class="display-type">value 11</div> 
       <div class="display-name">value 12</div>     
      </div> 
      <div class="display-row"> 
       <div class="display-type">value 21</div> 
       <div class="display-name">value 22</div>     
      </div>    
     </div> 
    <?php } ?>

来源

2014-09-05 07:33:25

使用jquery切换到表格视图和集合视图

回答

相关问题