layui laypage组件常见用法总结

<div class="category">

                    　　<ul id="newsTypeList">

                        　　　　<li class="hover" id="hyzxNews" data-typeId="1">新闻分类1</li>

                        　　　　<li data-typeId="2">新闻分类2</li>

                        　　　　<li data-typeId="3">新闻分类3</li>

                        　　　　<li data-typeId="4">新闻分类4</li>

                    　　</ul>

                </div>

<h2 id="newsType">新闻分类1</h2>

 <div class="list_box">

                    　　<ul id="newsList" class="list_ul"></ul>

                    　　<div id="demo7" style="text-align:center"></div>

                </div>

<script>

    layui.use(['laypage'], function () {

        var laypage = layui.laypage

            , layer = layui.layer;

//---------------------------点击侧边类型，加载新闻列表

        $('#newsTypeList li').click(function () {

            var typeId = $(this).attr("data-typeId");

            $.post('/News/GetNewsByPage', { page: 1, limit: 3, typeId: typeId }, function (result) {

                res = result.data;

                setHtml(res);

                setStyle(typeId)

                pages(result.count, typeId)//切换分类时候，调用页码，重新渲染

            });

        }).eq(0).click();

//--------------------------------分页组件渲染

        function pages(count, typeId) {

            laypage.render({

                elem: 'demo7'

                , count: count

                , theme: '#4A90E2'

                , layout: ['prev', 'page', 'next']

                , limit: 3

                , jump: function (obj, first) {

                    if (!first) {

                        $.post('/News/GetNewsByPage'

　　　　　　　　　　　　　　　　, { page: obj.curr, limit: obj.limit, typeId: typeId }

　　　　　　　　　　　　　　　　, function (result) {

                            　　　　res = result.data;

                            　　　　setHtml(res);

                       　　 });

                    }

                }

            })

        }

//--------------------------------写入后台内容 

        function setHtml(data) {

            var strHtml = "";

            $.each(data, function (index, item) {

                strHtml += ('<li>${item.Title}</li>');

            });

            document.getElementById('newsList').innerHTML = strHtml;

        }

//--------------------------------改变样式

        function setStyle(typeId) {

            $('ul.newsTypeList li').removeClass('hover');

            $('ul.newsTypeList li[data-typeId=' + typeId + ']').addClass('hover');

            $('#newsType').text($('ul#newsTypeList li[data-typeId=' + typeId + ']').text())

        }

    });

</script>