table实现 js数据访问传递json数据用render_to_response

 $(document).ready(function(){
    $.ajax({
      url:'/query/',
      dataType:'json',
      type:'GET',
      success:function(data){
        for(var i=0;i<data.length;i++){
          var a='<tr>'+'<td>'+data[i].codename+'</td>'+'<td>'+data[i].name+'</td>'+'<td>'+data[i].content_type_id+'</td>'+'</tr>';
          $('tbody').append(a)
        }
      }
  });
});
js通过.访问属性

1.ajax方式实现

数据data为list,每一个元素为dict

2.用bootstrap自带的table实现，还是麻烦了一点

<script type="text/javascript" src="{% static 'js/bootstrap-table.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap-table-zh-CN.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-table.css' %}">

  <table data-toggle="table" data-url="/query/">
    <thead>
      <tr>
        <th data-field="codename">权限代码</th>
        <th data-field="name">权限名称</th>
        <th data-field="content_type_id">权限分组</th>
      </tr>
    </thead>

3.最简单的实现，其实就是js访问后端传过来的数据，用.访问js属性,{{}}传递参数

return render_to_response('query.html', {'user_permission': user_permission},context_instance=RequestContext(request))
 
 
 
然后在query.html里可以循环user_permission
 
{% for user in user_permission%}
 
 　　{{ user.user_name }}
 
{% endfor %}

4.输出复杂好看的表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>数据汇总</title>
        <script type="text/javascript" src="/static/webprj/template.js"></script>
        <script type="text/javascript" src="/static/webprj/jquery-1.11.2.js"></script>
        <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
        <script type="text/javascript" src="/static/bootstrap-table/bootstrap-table.js"></script>
        <link rel="stylesheet" type="text/css" href="/static/bootstrap-table/bootstrap-table.css">
        <style type="text/css">
        
        table,table td,table th{border:1px solid #000;border-collapse:collapse;font-size: 15px;}
        table tr td{
            padding:0px 0px 0px 5px;
        }
        table tr th{
            text-align:center;
        }
        table{
            max-width:100%;
            font-size:12px;
            
        }
        
        </style>
    </head>
    <body>
        
        <div>
        <div  id="dv">
        
        <input id="print2" type="button" value="打印">
        </div>
            <table id="table" class="table table-bordered table-hover">
            </table>
            
        </div>
        <!--方法2-->
        <div style="display:none">
            <form id="postData_form" method="post" target="_blank">
            <!--<form id="postData_form" target="_blank">-->
                <input name='postData' id='postData' type='hidden' value=''/>               
            </form>
            
        </div>
    <script type="text/javascript">   
    //var results = document.getElementById("results");
    var spinfos={{spinfos|safe}};
    $(function(){
        $('#table').bootstrapTable({
            method: 'get',
                cache: false,
                height: 600,
                striped: true,
                trimOnSearch: true,
                checkAll:true,
                clickToSelect: true,
                singleSelect: false,
                pagination: false,
                pageSize: 10,
                pageNumber:1,
                pageList: [10, 20, 50, 100, 200, 500],
                search: true,
                showColumns: true,
                showRefresh: false,
                showExport: true,
            columns:[
            {
                field:'state',
                checkbox:'true'
            },
            {
                field:'name',
                title:'名称',
                align:"center",valign:"middle",sortable:"true"
            },{
                field:'spec',
                title:'规格',align:"center",valign:"middle",sortable:"true"
            },{
                field:'code',
                title:'商品代码',align:"center",valign:"middle",sortable:"true"
            },{
                field:'munit',
                title:'单位',align:"center",valign:"middle",sortable:"true"
            },{
                field:'code2',
                title:'条形码',align:"center",valign:"middle",sortable:"true"
            },
            {
                field:'price',
                title:'价格',align:"center",valign:"middle",sortable:"true"
            },{
                field:'vipprice',
                title:'会员价',align:"center",valign:"middle",sortable:"true"
            }],
            data:spinfos
        })
    
        $("#print2").click(function(){
            printData()
        })
    })
    function printData(){
        var newspinfos = []
        var rows = $.map( $('#table').bootstrapTable('getSelections'),function(row){
            return row
        });
        console.log(rows)
        //console.log(spinfos)
        
        var textspinfos = JSON.stringify(rows)
        console.log(textspinfos)
        $("#postData").val(textspinfos)
        var postUrl = "/printprice2"
        document.getElementById("postData_form").action=postUrl
        document.getElementById("postData_form").submit()
    }
</script>
        
</body>
</html>

来自为知笔记(Wiz)

相关阅读:
amazeui学习笔记--css（HTML元素1）--按钮Button
【DataStructure】The description of Java Collections Framework
android面试题不仅仅是面试是一个很好的学习
 SVNclient安装与使用
 Microsoft Visual C++ Runtime Library Runtime Error解决的方式
 fullcalendar日历控件集合知识
 android存储阵列数据SharedPreferences
Codeforces 484E Sign on Fence(是持久的段树+二分法)
漂亮的表格样式(使用CSS样式表控制表格样式)
交叉编译libxml2
原文地址：https://www.cnblogs.com/wuqingzangyue/p/5750034.html

table实现 js数据访问 传递json数据用render_to_response

table实现 js数据访问传递json数据用render_to_response