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

Question

在同一页面中，我必须根据用户的选择提供表格和集合视图。对于使用jquery datatables插件的表格。到集合视图我使用ajax函数从服务器获取html数据。 在不加载整个内容的情况下创建此切换部件的最佳方法是什么，但是根据用户的选择加载数据。

这些是我用于开关的按钮

<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);
    }
});

Answer 1

像这样的东西，你能试试吗？我只是在具有相同值的CSS上做了它

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  }  ?>